Пробегающий анимированный блик на кнопке Elementor

Очень много запросов было по поводу того как сделать эффект пробегающего блика на кнопке да ещё и в конструкторе 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 — Исправлено: одинаковое выравнивание для всех кнопок на странице

С уважением, Цифровой Алекс