CSS z-index for Shadow only - html

Question

I am trying to overlap my shadow created during hover transitions of my round button with a div (red one), so that the pusle effect doesn't show on my div but at other places.
Here is my code:
body {
background: #292f33;
text-align: center;
color: #FFF;
font-family: sans-serif;
}
.btntest {
width: 190px;
padding: 4px;
border-radius: 5px;
background: red;
color: white;
z-index: 299;
position: fixed;
}
.button {
position: fixed;
z-index: 300;
left: 10px;
display: inline-block;
height: 60px;
width: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
}
.button:hover {
animation: pulse 1.1s ease-out;
animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
25% {
z-index: 298;
box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
}
49.9% {
z-index: 298;
box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
}
50% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
75% {
z-index: 298;
box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
}
99.9% {
z-index: 298;
box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
}
100% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
}
#-webkit-keyframes pulse {
0% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
25% {
z-index: 298;
box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
}
49.9% {
z-index: 298;
box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
}
50% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
75% {
z-index: 298;
box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
}
99.9% {
z-index: 298;
box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
}
100% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
}
<p>Pulse Effect</p>
<a class="button"></a>
<div class="btntest">Test</div>
I Have given z-index property for the transition shadows but everytime I hover, the button also hides back below the div - and I only want shadow to hide.
How can I achieve this?

Answer 1

As #connexo said, the shadow of an element is always on the same z-index level of its element.
A possible workaround is to create an other hidden element, which will stand on a lower layer, animated while hovering you real button :
body {
background: #292f33;
text-align: center;
color: #FFF;
font-family: sans-serif;
}
.btntest {
width: 190px;
padding: 4px;
border-radius: 5px;
background: red;
color: white;
z-index: 299;
position: fixed;
}
.button {
position: fixed;
z-index: 300;
left: 10px;
display: inline-block;
height: 60px;
width: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
}
.fake-btn {
position: fixed;
z-index: 298;
left: 10px;
display: inline-block;
height: 60px;
width: 60px;
border-radius: 50%;
margin: 0;
background: rgba(255, 255, 255, 0);
}
.button:hover + .fake-btn {
animation: pulse 1.1s ease-out;
animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
25% {
box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
}
49.9% {
box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
}
50% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
75% {
box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
}
99.9% {
box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
}
#-webkit-keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
25% {
box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
}
49.9% {
box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
}
50% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
75% {
box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
}
99.9% {
box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
}
<p>Pulse Effect</p>
<a class="button"></a>
<p class="fake-btn"></p>
<div class="btntest">Test</div>

Answer 2

You cannot make it work this way. The shadow of an element will always be stacked on the same z-index level as the element that has the shadow.