Анімація кнопки на CSS за два кроки
![блік на кнопці CSS](/templates/yootheme/cache/e9/blink-button-e9deb60a.jpeg)
Анімація бліку на кнопці — це ефективний метод, що дозволить надати вашому веб-сайту цікавого і привабливого вигляду. У цій статті ми розглянемо, як створити таку анімацію з використанням 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 стилів — це простий і ефективний спосіб зробити ваші кнопки більш зручними, доступними та привабливими. Як бачите, зробити таку анімацію досить легко. Проте, якщо раптом у вас не вийшло — поділіться зі мною проблемою, яка у вас виникла і я спробую вам допомогти.
Коментарів: 2
-
У мене сайт на Helix Ultimate v1.1.4 (від Joomshaper). Ніяк не можу знайти файл css. Де саме він знаходиться?
-
У вас є 2 варіанти: або створіть файл custom.css за шляхом шаблон/css/custom.css і додайте у нього CSS-код, або зайдіть у налаштування шаблону Template options, далі в Custom Code і вставте код у вікно Custom CSS необхідні стилі.
-