Вам кажется, что ваши кнопки не достаточно надоедливы? У меня есть для вас решение.
Достаточно популярная механика — пробегающий блик по кнопке. В нашем случае мы сделаем его на кнопке из 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.
