Очень много запросов было по поводу того как сделать эффект пробегающего блика на кнопке да ещё и в конструкторе Elementor. Сам эффект блика на кнопке я взял из одного примера, немного доработал и интегрировал в Элементор.
Для работы мы будем использовать бесплатную версию плагина . С его помощью можно создавать собственные виджеты для Elementor из любого кода, который вы можете найти в интернете.
Скачать архив готового виджета можно по этой ссылке и импортировать к себе.
Содержание
HTML код будущей кнопки
<div class="flare-button-wrapper" style="text-align: {переменная выравнивания}"> <a class="btn_box" href="#"><span class="btn_flare"></span>Заказать тест-драйв</a> </div>
А это стили CSS
@-webkit-keyframes sheens { 0%, 79% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em); transform: rotateZ(60deg) translate(-5em, 7.5em) } 80% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em); transform: rotateZ(60deg) translate(-5em, 7.5em) } 95% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: rotateZ(60deg) translate(1em, -11em); transform: rotateZ(60deg) translate(1em, -11em) } to { opacity: 0; filter: alpha(opacity=0); -webkit-transform: rotateZ(60deg) translate(1em, -9em); transform: rotateZ(60deg) translate(1em, -9em) } } @keyframes sheens { 0%, 79% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em); transform: rotateZ(60deg) translate(-5em, 7.5em) } 80% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em); transform: rotateZ(60deg) translate(-5em, 7.5em) } 95% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: rotateZ(60deg) translate(1em, -11em); transform: rotateZ(60deg) translate(1em, -11em) } to { opacity: 0; filter: alpha(opacity=0); -webkit-transform: rotateZ(60deg) translate(1em, -9em); transform: rotateZ(60deg) translate(1em, -9em) } } .btn_box { background: #264894; background: -webkit-gradient(linear,left top,right top,from(#264894),to(#0778bf)); background: linear-gradient(to right,#264894 0%,#0778bf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#264894', endColorstr='#0778bf',GradientType=1 ); -webkit-box-shadow: 0 8px 18px 0 rgba(55,129,208,.53) !important; box-shadow: 0 8px 18px 0 rgba(55,129,208,.53) !important; -webkit-border-radius: 6px; border-radius: 6px; border-top: 0; border-right: 0; border-left: 0; border-bottom: 4px solid #22529a; text-shadow: 0 1px 0 rgba(27,174,91,.004); background-position: 0 100%; background-size: 100%; color: #fff; -webkit-transition: .5s; transition: .5s; padding: 28px 35px; font-size: 18px; font-weight: 600; cursor: pointer; position: relative; display: inline-block } .btn_flare { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-border-radius: 6px; border-radius: 6px; overflow: hidden; } .btn_flare:after { content: ""; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; background: -webkit-gradient(linear,left top,left bottom,from(rgba(229,172,142,0)),color-stop(50%,rgba(255,255,255,.7)),color-stop(50%,rgba(229,172,142,0))); background: linear-gradient(to bottom,rgba(229,172,142,0),rgba(255,255,255,.7) 50%,rgba(229,172,142,0)); -webkit-transform: rotateZ(60deg) translate(-5em,7.5em); -ms-transform: rotate(60deg) translate(-5em,7.5em); transform: rotateZ(60deg) translate(-5em,7.5em); opacity: 0; filter: alpha(opacity=0); -webkit-animation: sheens 3s infinite; animation: sheens 3s infinite; z-index: 1; } .btn_box:hover { background-size: 150%; border-color: #22529a; }
Вы можете использовать этот код просто верстая собственную тему, вставить в существующую или интегрировать эффект пробегающего блика на кнопке в конструктор сайтов и страниц Elementor. Во всех случаях этот код сработает.
Важное исправление
В видео я допустил небольшую погрешность и сделал поле для ссылки простым текстовым полем. Вам нужно изменить тип атрибута с Текстовое поле, на Ссылка, обновить атрибут и обязательно нажать обновить виджет.

После этого перезагрузите документ. Поле для ссылки обновится и примет привычный вид. Для него начнут работать стандартные правила динамики. Это значит, что можно и ссылку из произвольного поля вытащить, и попап ей назначить.

Кстати, в архиве, который можно скачать в зелёном блоке выше, уже всё исправлено.
Где брать идеи эффектов
Идеи эффектов и сам код я часто ищу на сервисе Codepen. Потрясающее сообщество и платформа для демонстрации кода имеет библиотеку народного творчества, которое изумляет представленными решениями.
Напишите в комментариях какие ещё эффекты вы бы хотели реализовать и поделитесь этой статьёй на страницах в социальных сетях, своих и не только ????
Обновления статьи
Здесь буду публиковать все изменения, которые вносил в код. Архив по ссылке выше также обновляется по мере исправлений и дополнений.
11.12.2019 — Исправлено: одинаковое выравнивание для всех кнопок на странице
С уважением, Цифровой Алекс