Пульсирующий ховер на кнопке. На чистом CSS

Полезный сниппет с анимацией кнопки при наведении мыши. В примере ниже будем использовать пульсирующий hover эффект на ссылке.

CSS код пульсирующей кнопки

.pulse-hover-button {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    border: 3px solid 
#3c67e3;
    border-radius: 5px;
    padding: 20px 50px;
}

.pulse-hover-button:hover{
    animation: pulsate 1s 
    ease-in-out;
}

.pulse-wrapper-container {
    background: #161616;
    padding: 40px
}

@keyframes pulsate {
    0%{
        box-shadow: 
        0 0 25px #5ddcff,
        0 0 50px #4e00c2;
    }
}

HTML разметка

<div class="pulse-wrapper-container">
<a href="#" class="pulse-hover-button">Pulse me</a>
</div>

Результат