Блик на кнопке Elementor

Вам кажется, что ваши кнопки не достаточно надоедливы? У меня есть для вас решение.

Достаточно популярная механика - пробегающий блик по кнопке. В нашем случае мы сделаем его на кнопке из Elementor, как показано ниже:

Пример блика

Для того, чтобы добиться такого же эффекта блика на кнопке Elementor, нам нужно сделать всего несколько шагов.

Шаг 1. Копировать

Скопируйте CSS код, представленный ниже:

/*Блик на кнопке*/
.elementor-button{
overflow: hidden;
position: relative;
}
.elementor-button:after {
content: "";
margin-left: 60px;
width: 120px;
height: 300px;
background: #fff;
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
position: absolute;
left: -40px;
top: -150px;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-animation-name: slideme;
animation-name: slideme;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
filter: blur(60px);
}
@-webkit-keyframes slideme { 0% { left: -30px; margin-left: 0px; }
30% { left: 110%; margin-left: 80px; }
100% { left: 110%; margin-left: 80px; } }
@keyframes slideme { 0% { left: -30px; margin-left: 0px; }
30% { left: 110%; margin-left: 80px; }
100% { left: 110%; margin-left: 80px; } }

Шаг 2. Вставить

Далее этот CSS вам необходимо вставить в нужное вам место. Например, если вы хотите, что это все работало на все сайте, то вам нужно открыть данные раздел «Настроить»:

https://vash-site.ru/wp-admin/customize.php

Где vash-site.ru - доменное имя вашего сайта.

Далее перейти в раздел «Дополнительные стили»  и залить весь CSS код туда.

Шаг 3. Радоваться или дорабатывать

Если вы неискушенный пользователь и вас не раздражают полностью готовы решения, то мои поздравления, буквально за 5 минут вы только что настроили блик на кнопке Elementor.

Если же ваша задача не такая простая, как кажется. Например, нужно сделать блик на определенных кнопках, а не на всем сайте, то в таком случае можете немного доработать классы и использовать блик лишь на определенных кнопках Elementor.