/ Скрипты / 22 клик-эффекта для кнопок

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

Автор: delux · Опубликовано 22.02.2019 · Обновлено 25.02.2019

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

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

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

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>

</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;
}

.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);
	}
}