Create a CSS pulse effect from border outwards - css

Question

I started creating a code pen with the effect I want here: https://codepen.io/oli_js/pen/KKPGZLm?editors=1100
However, this pulse effect radiates out from the centre point, but I want the inner circle to be transparent and just have the effect radiate just from the border.
Does anyone know of any any magical CSS wizardry to do this?!
.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>

Answer 1

You can do it with shadow effect too like this..
.ripple{
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
border:2px red solid;
animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
}
}
<div class="ripple"></div>