Кнопка с бликом ELEMENTOR PRO

Кнопка с бликом Elementor Принцип добавления кнопки с бликом: Итак, берем стандартную кнопку, указываем надпись и ссылку, накатываем нужные стили. Самое главное указываем нужный класс CSS flare-button во вкладке Расширенные
Кнопка с бликом ELEMENTOR PRO

Кнопка с бликом ELEMENTOR PRO

ПРИМЕР КНОПКИ

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

 

Кнопка с бликом Elementor

Принцип добавления кнопки с бликом:

Итак, берем стандартную кнопку, указываем надпись и ссылку, накатываем нужные стили. Самое главное указываем нужный класс CSS flare-button во вкладке Расширенные

Кнопка с бликом для Divi и Elementor • 4 • Финты WordPress
Настройка кнопки с бликом для Elementor

Далее указываем через кастомайзер (Внешний вид — Настроить) добавляем код 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);
		
	}
}
				
			

Добавить ховера:

				
					.flare-button .elementor-button-link:hover {
	box-shadow: none;
	-webkit-animation: si-button-pulse 0.8s 0s ease-out 1;
	-moz-animation: si-button-pulse 0.8s 0s ease-out 1;
	animation: si-button-pulse 0.8s 0s ease-out 1;
	overflow: hidden;
}

.flare-button .elementor-button-link {
	overflow: visible !important;
}

@keyframes si-button-pulse {
	from {
		box-shadow: 0 0 8px 6px #cd5055, 0 0 12px 14px #cd5055;
	}
	
	to {
		box-shadow: 0 0 10px 4px rgba(255, 48, 26, 0), 0 0 5px 30px rgba(255, 48, 26, 0);
	}
}
				
			

Тонкая настройка блика:

По необходимости блик можно настроить по разному.

				
					.flare-button :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;
}
				
			

  • width — изменяет ширину блика;
  • background-color — цвет блика;
  • animation — скорость пробегания блика, например указываете moving 10s ease-in-out infinite; и блик будет ме-е-едленно ползать:)

Заключение

Вот как-то так. Ничего сложного, главное в классах не запутаться.

ПС. Вообще странно, что еще никто не написал виджет для Элементора с подобной кнопкой, может после статьи кто-то сподобиться из сообщества сделать.

Часть информации с сайта Финты WordPress

Вы можете заказать создание сайта: примеры наших работ

Поделиться или сохранить себе

VK
OK
Telegram
WhatsApp
Email
Владимир Delai Sait

Владимир Delai Sait

Основатель и руководитель веб студии Делай Сайт

Больше статей »

ОБРАТНЫЙ ЗВОНОК

ОСТАВЬТЕ ВАШИ КОНТАКТНЫЕ ДАННЫЕ, СВЯЖЕМСЯ И ОБСУДИМ ВАШ ВОПРОС

Я даю согласие на обработку персональных данных