Кнопки CSS с «конкретной» анимацией

Question

Есть ли у кого-нибудь идеи о том, как реализовать кнопку HTML + CSS, которая когда-то нажала, имеет такую ​​анимацию?

Источник: http://www.materialup.com/posts/shinebutton

Спасибо за помощь!

Answer 1

с Твиттера "любимая" анимация

.heart { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat; 
 
    background-position: 0 0; 
 
    cursor: pointer; 
 
    animation: fave-heart 1s steps(28); 
 
} 
 
.heart:hover { 
 
    background-position: -2800px 0; 
 
    transition: background 1s steps(28); 
 
} 
 
@keyframes fave-heart { 
 
    0% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: -2800px 0; 
 
    } 
 
}

<div class="heart"></div>

More