JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="button">
    <svg width="100%" height="100%" viewBox="0 0 50 50">
        <polygon points="15.7,21.3 11.9,21.3 11.9,28.8 15.7,28.8 21.9,35 21.9,15"/>
    </svg>
    <svg class="echo" width="100%" height="100%" viewBox="0 0 50 50">
        <path d="M26.9,25c0-1.7-1-3.1-2.4-3.8V22c0.3,0.1,0.5,0.3,0.6,0.5c0.6,0.6,1,1.5,1,2.4s-0.3,1.7-1,2.4  c-0.2,0.2-0.5,0.4-0.6,0.5v0.8C25.9,28.1,26.9,26.7,26.9,25z"/>
        <path d="M32.1,25c0-2.6-1.5-4.8-3.7-5.8v1.3c0.4,0.2,0.7,0.5,1,0.8c1,1,1.5,2.3,1.5,3.7s-0.5,2.7-1.5,3.7  c-0.3,0.3-0.7,0.6-1,0.8v1.3C30.6,29.8,32.1,27.6,32.1,25z"/>
    </svg>
    <svg class="echo" width="100%" height="100%" viewBox="0 0 50 50">
        <path d="M38.1,25c0-3.5-2-6.5-5-7.9v1.8c0.5,0.3,1,0.7,1.4,1.1c1.4,1.4,2,3.1,2,5c0,1.9-0.7,3.7-2,5  c-0.4,0.4-1,0.8-1.4,1.1v1.8C36.1,31.5,38.1,28.5,38.1,25z"/>
    </svg>
</div>
<div class="button">
    <svg height="50px" width="50px" viewBox="0 0 50 50">
        <polygon points="20.7,21.3 16.9,21.3 16.9,28.8 20.7,28.8 26.9,35 26.9,15  " />
        <path d="M33.1,25c0-2.6-1.5-4.8-3.7-5.8v1.3c0.4,0.2,0.7,0.5,1,0.8c1,1,1.5,2.3,1.5,3.7c0,1.4-0.5,2.7-1.5,3.7 c-0.3,0.3-0.7,0.6-1,0.8v1.3C31.6,29.8,33.1,27.6,33.1,25z" />
    </svg>
</div>

CSS

@keyframes show-echo{
    0%{transform:scale(0.8) translateX(-10px);}
    40%{transform:scale(1) translateX(-3px);}
    60%{transform:scale(1) translateX(-3px);}
    100%{transform:scale(0.8) translateX(-10px);}
}
@keyframes show-echo2{
    0%{transform:scale(0.8) translateX(-10px);opacity:0}
    10%{transform:scale(0.8) translateX(-10px);opacity:1}
    45%{transform:scale(1) translateX(-3px);}
    55%{transform:scale(1) translateX(-3px);}
    90%{transform:scale(0.8) translateX(-10px);opacity:1}
    100%{transform:scale(0.8) translateX(-10px);opacity:0}
}
div.button{
    position:relative;
    width:50px;
    height:50px;
    margin:5px;
}
div.button:before{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    border-radius:5px;
    background:rgba(30,30,30,0.5);
    content:"";
}
div.button>svg{
    position:absolute;
}
div.button:first-child>svg{
    left:5px;
}
div.button:first-child>svg:nth-child(2){
    opacity:0;
}

div.button:first-child:hover>svg:nth-child(2){
    animation:show-echo2 600ms;
    animation-timing-function:cubic-bezier(.63,.01,.79,.41);
}
div.button:first-child:hover>svg:nth-child(3){
    animation:show-echo 600ms;
    animation-timing-function:cubic-bezier(.63,.01,.79,.41);
}
div.button>svg>*{
    fill:#fff;
}
div.button>svg.echo{
    transform:scale(0.8) translateX(-10px);
}