SOURCE

<img class="heart-bounce" src="https://img1.rrzuji.cn/uploads/scheme/2203/15/m/bRNS4d7CB8nu4w00Y4Y2.svg" alt="">
<svg class="icon heart-bounce" style="width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2021"><path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" fill="#E5404F" p-id="2022"></path></svg>
<button class="ripple">BUTTON</button>

.heart-bounce {
    animation: heart-beat 1s ease-in-out;
    margin: 100px;
}

@keyframes heart-beat {
    3% {
        transform: scale(.9)
    }
    6% {
        transform: scale(.8)
    }
    9% {
        transform: scale(.7)
    }
    12% {
        transform: scale(.6)
    }
    15% {
        transform: scale(.7)
    }
    18% {
        transform: scale(.8)
    }
    25% {
        transform: scale(.9)
    }
    30% {
        transform: scale(1)
    }
    40% {
        transform: scale(1.1);
        opacity: .6
    }
    50% {
        transform: scale(1.2);
        opacity: .5
    }
    80% {
        transform: scale(1.5);
        opacity: .4
    }
    90% {
        transform: scale(1.8);
        opacity: .3
    }
    95%{
        transform: scale(1.5);
        opacity: .2
    }
    100%{
        transform: scale(1);
        opacity: .1;
       
    }
}

.ripple {
    position: relative;
}
.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left:-15px ;
    pointer-events: none;
    background-color: rgba(255,255,255,.7);
    border-radius: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform .8s, opacity .8s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: 0.75;
    transition: 0s;
}
 button {
     position: relative;
     margin: auto;
     overflow: hidden;
     padding: 1rem 2rem;
     color: #fff;
     background: #6200ee;
     font-family: "Roboto", sans-serif;
     border-radius: 0.25rem;
     box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
     outline: 0;
     border: 0;
     cursor: pointer;
 }