I originally set out to create a code pen with the desired effect, which you can view here: https://codepen.io/oli_js/pen/KKPGZLm?editors=1100
However, the pulse effect in my code radiates outwards from the center point. What I actually want is for the inner circle to be transparent and have the effect emanate solely from the border.
Is there anyone out there who knows of any CSS sorcery that could achieve this mystical transformation?!
.pulse {
border-radius: 50px;
height: 80px;
left: 50%;
letter-spacing: 0.05em;
line-height: 50px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 80px;
}
.pulse:after {
-webkit-animation: pulse 2s infinite linear;
background: red;
border-radius: 50px;
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.button {
background: transparent;
border-radius: 100% 100%;
width: 40px;
height: 40px;
left: 50%;
border:2px solid red;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
@-webkit-keyframes pulse{
0% {transform:scale(0.5);
opacity:0;}
33% {transform:scale(0.8);
opacity:1;}
100% {transform:scale(1);
opacity:0;}
}<div class="pulse">
<div class="button"> </div>
</div>