22 клик-эффекта для кнопок

Представляем вашему внимаю сборку эффектов для кнопок после клика на них.

Примеры работы эффектов вы можете увидеть на странице демонстрации

Пример установки:

1. Сама кнопка HTML

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

2. Стилизация кнопки

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

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

.cbutton__icon {
	display: block;
}

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

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

3. Подключаем стили эффекта после нажатия

/* Effect Boris */

.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% {
		opacity: 0;
		transform: scale3d(1.2, 1.2, 1);
	}
}