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

В этом уроке я покажу как сделать красивую, привлекающую внимание кнопку с бегающим бликом слева направо:

В расширенных параметрах элемента «Кнопка» прописать в поле CSS класс:

				
					flare-button
				
			

В пользовательский CSS добавить следующий код:

				
					.flare-button .elementor-button-link {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.flare-button .elementor-button-link:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
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);

}
}
				
			

Поделись с друзьями или сохрани себе:

VK
Facebook
Telegram
WhatsApp

Комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Привет! Я - Андрей. Занимаюсь обучением и разработкой сайтов на CMS WordPress и Elementor.

Мой ТОП хостингов в РФ

Мой ТОП хостингов в РБ

Хостинг за крипту в Европе