Анімація кнопки на CSS за два кроки

Анімація бліку на кнопці — це ефективний метод, що дозволить надати вашому веб-сайту цікавого і привабливого вигляду. У цій статті ми розглянемо, як створити таку анімацію з використанням CSS властивостей і ключових кадрів, завдяки чому нам вдасться досягти живого відблиску на кнопці, що у свою чергу ще більше спонукатиме до дії користувачів сайту.

Крок 1: Додаємо HTML кнопку

Для цього нам потрібно лише створити звичайну HTML-кнопку і заздалегідь додати їй клас blick-button.

<button class="blick-button">Кнопка</button>

Якщо ви оновите сторінку — поки нічого не відбудеться, тому що ще потрібно виконати другий крок.

Крок 2: Прописуємо CSS стилі

Для того, щоб зробити блік на кнопці, ви повинні додати до CSS-файлу свого сайту такий код:

.blick-button {
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.blick-button:before {
	content: "";
	background-color: rgba(255, 255, 255, 0.5);
	height: 100%;
	width: 3em;
	display: block;
	position: absolute;
	opacity: 1;
	top: 0;
	left: -4.5em;
	-webkit-transform: skewX(-45deg) translateX(0);
	transform: skewX(-45deg) translateX(0);
	-webkit-transition: none;
	transition: none;
	-webkit-animation: moving 3s ease-in-out infinite;
	-moz-animation: moving 3s ease-in-out infinite;
	-ms-animation: moving 3s ease-in-out infinite;
	-o-animation: moving 3s ease-in-out infinite;
	-animation: moving 3s ease-in-out infinite;
}
@keyframes moving {
	30% {
		webkit-transform: skewX(-45deg) translateX(33.5em);
		transform: skewX(-45deg) translateX(33.5em);
	}
	100% {
		webkit-transform: skewX(-45deg) translateX(33.5em);
		transform: skewX(-45deg) translateX(33.5em);
	}
}

Щоб подивитись, як саме буде виглядати анімація на кнопці, натисніть тут 😉

Отже, блік кнопки за допомогою CSS стилів — це простий і ефективний спосіб зробити ваші кнопки більш зручними, доступними та привабливими. Як бачите, зробити таку анімацію досить легко. Проте, якщо раптом у вас не вийшло — поділіться зі мною проблемою, яка у вас виникла і я спробую вам допомогти.