SOURCE

<div class="record-btn"></div>
<div class="border-wrapper">
    <div class="record-wrapper first"></div>
    <div class="record-wrapper second"></div>
    <div class="record-wrapper third"></div>
</div>

.record-btn {
    position: absolute;
    left: 40px;
    top: 100px;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: url(https://imagev2.xmcdn.com/storages/bb7b-audiofreehighqps/93/D6/GMCoOSQFwEJIAAA9ygEPjfgY.png)
        no-repeat center/100%;
    margin: 0 auto;
    z-index: 2;
}
.border-wrapper {
    position: absolute;
    left: 40px;
    top: 100px;
    width: 100%;
    height: 100%;
    display: block;
}
.record-wrapper.first {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 85px;
    height: 85px;
    background: rgba(234, 90, 54, 0.2);
    opacity: 0.1;
    border-radius: 50%;
    animation: first 3s infinite linear;
}
.record-wrapper.second {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 85px;
    height: 85px;
    background: rgba(234, 90, 54, 0.2);
    opacity: 0.1;
    border-radius: 50%;
    animation: first 3s infinite linear;
    animation-delay: 1s;
}
.record-wrapper.third {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 85px;
    height: 85px;
    background: rgba(234, 90, 54, 0.2);
    opacity: 0.1;
    border-radius: 50%;
    animation: first 3s infinite linear;
    animation-delay: 2s;
}
@keyframes first {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    33% {
        opacity: 0.66;
        transform: scale(1.33);
    }
    66% {
        opacity: 0.33;
        transform: scale(1.67);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}