Приветствую, друзья, сегодня покажу как сделать анимированный блик на кнопке. Использовать для этого мы будем только чистый CSS. Без использования плагинов и библиотек. Наш анимированный блик будет похож на тот, что используют в тильде.

Эффект анимированного блика часто используется для привлечения внимания пользователя. Как только пользователь зайдет на сайт, он сразу увидит кнопку с анимированным бликом. Так же из-за приятной анимации повышается конверсия.

Как всегда, вы можете посмотреть пример блика на кнопке и готовый код для него на codepen.

Анимированный блик на кнопке — HTML часть

Начнем с создания HTML структуры. Тут все просто, создаем обычную кнопку, или <a> тег. Единственное, что нужно сделать — поместить внутрь нашей кнопки <span class=»flare»><span>, или другим удобным классом. Это и будет наш блик.

<a href="#" class="button">WebDevTips <span class="flare"></span></a>

CSS код

Саму кнопку вы можете стилизовать как хотите, тут только мой пример. Важное, что вам нужно сделать — добавить для самой кнопки свойство overflow-x: hidden и position: relative. Это нужно, что бы скрыть блик, когда он не на кнопке и правильно позиционировать его относительно её.

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

.button {
    padding: 20px 80px;
    background: #3E64FF;
    color: #ffffff;
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    border-radius: 10px;
    position: relative; // Это важно добавить 
    overflow-x: hidden; / Это важно добавить 
}

.button .flare {
    position: absolute;
    top: 0;
    height: 100%;
    width: 45px;
    transform: skewX(-45deg); // Наклон
    animation: flareAnimation;
    left: -150%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4));
    animation: flareAnimation 3s infinite linear; // Время и тип анимации можно менять
}

@keyframes flareAnimation {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

Результат

WebDevTips

Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их на Youtube, или пишите мне в Telegram, с радостью вам помогу и отвечу на вопросы.

Так же буду очень благодарен, если вы ознакомитесь с другими моими уроками:
1. Параллакс эффект для фона сайта на чистом CSS
2. Делаем видео фон на чистом HTML+CSS

Анимированный блик на чистом CSS

Анимированный блик на кнопке — HTML часть

CSS код

Результат