Анимационные эффекты при нажатии CSS

В данной статье рассмотрим как сделать красивый анимационный эффект при нажатии  курсором на объект (кнопку) на компьютере или же при касании объекта на сенсорном экрана планшета или телефона. Данный эффект выполним с помощью CSS анимации на псевдо-элементах.

>>> ДЕМО <<<

>>> СКАЧАТЬ ИСХОДНИКИ <<<

По ссылке выше вы можете скачать множество различных эффектов на данную тему. Данные эффекты весьма полезны, так как они визуализируют действие, то есть убеждают нас в том, что кнопка действительно нажалась. Далее речь пойдет только об одном из них: эффекте пульсирующих окружностей (волновой эффект).

Учтите, что некоторые эффекты будут работать только в современных версиях браузеров.

IE10 не поддерживает анимацию на псевдо-элементах, так что вы не сможете увидеть их в нем.

Для демонстрации я использую шрифтовые иконки Font Awesome и следующую HTML-разметку:

<button class="cbutton cbutton--effect-boris">
	<i class="cbutton__icon fa fa-fw fa-play"></i>
	<span class="cbutton__text">Play</span>
</button>

К кнопке применим следующий общий стиль:

.cbutton {
padding: 0;
margin: 1em;
color: #286aab;
font-size: 1.4em;
border: none;
background: none;
transition: color 0.7s;
display: inline-block;
position: relative;
}

.cbutton.cbutton--click,
.cbutton:focus {
color: #3c8ddc;
outline: none;
}

.cbutton__icon {
display: block;
}

.cbutton__text {
pointer-events: none;
opacity: 0;
position: absolute;
}

.cbutton::after {
border-radius: 50%;
margin: -35px 0 0 -35px;
left: 50%;
top: 50%;
height: 70px;
width: 70px;
content: '';
position: absolute;
pointer-events: none;
opacity: 0;
}

Добавив класс через JavaScript, мы запускаем следующие стили (анимацию):

.cbutton--effect-boris::after {
background: rgba(111,148,182,0.1);
}

.cbutton--effect-boris.cbutton--click::after {
animation: anim-effect-boris 0.3s forwards;
}

@keyframes anim-effect-boris {
0% {
transform: scale3d(0.3, 0.3, 1);
}
25%, 50% {
opacity: 1;
}
100% {
transform: scale3d(1.2, 1.2, 1);
opacity: 0;
}
}

Получившийся эффект:

Для эффекта “Stana” вы будете должны использовать trasitions-эффекты на SVG-фигурах, но учтите, что на данный момент это работает только Хроме.

Надеюсь вам понравились данные эффекты… Вдохновляйтесь!