Как создать блик на кнопке

Как создать блик на кнопке

Как создать блик на кнопке.
В этом уроке я расскажу, как сделать блик на кнопке

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

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

Код который я использовал

.elementor-button-link {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.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 5s 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);
        
    }
}

Подпишитесь на мой канал в Дзене https://zen.yandex.ru/id/62189a5e92eea25b25ba369a

Группа в VK https://vk.com/eintegrate 

Телеграмм t.me/yaroslavgerasimov 

Пройти обучение по созданию сайтов на WordPress индивидуально https://e-integrate.ru/sozdanie-sajta-s-nastavnikom/

Задать вопросы записаться на консультацию https://e-integrate.ru/bronirovanie-konsultatsii-po-skajpu/