CSS эффекты нажатия

Набор эффектов нажатия мыши, или сенсорных взаимодействий. Эффекты сделано с CSS-анимацией в основном на псевдо-элементах.

Демо / Исходники

ClickEffect[1]
image-925

Один из наиболее эффективных эффектов в последнее время это появляющиеся круги после нажатия мыши. В то время как эти эффекты основаны на месте щелчка или прикосновения, сама идея обеспечения эффекта обратной связи действительно интересна. Как правило, тонкие эффекты, используются в приложение демонстрируя визуализацию нажатия на экран. Но такого рода эффект может быть полезен и на сайтах.

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

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

IE10, похоже, не поддерживает animationend на псевдо-элементах.

Для демонстрации мы используем значки шрифта Awesome и вызываем эффект на кнопке:

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

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

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

При добавлении класса с помощью JavaScript мы вызываем анимацию:

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

Вот один из эффектов:

ClickEffect[1]
image-926

Для эффекта «Stana», мы используем переход на SVG clipPath, так что работает он только в Chrome на данный момент.

ClickEffect2[1]
image-927

Надеемся, вам понравится эти эффекты.

Демо / Исходники