Анимированная кнопка при клике

Анимированная кнопка при клике

Owebs
25 октября 2022
Просмотры 115
Рейтинг
Время чтения Время чтения: 3 минуты

Оглавление
Развернуть Свернуть

Как сделать кнопку с анимацией при клике

 

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

Для создания такой кнопки перекопируйте следующие части кодов:

HTML:
                <div class="wave_wrapper">
                    <a href="#" class="wave_btn">button</a>
                </div>

            
CSS:
                .wave_wrapper {
                    position: relative;
                }
        
                .wave_btn {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-width: 250px;
                    height: 50px;
                    box-sizing: border-box;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 22px;
                    text-align: center;
                    text-transform: uppercase;
                    letter-spacing: 2px;
                    color: #fff;
                    background-color: rgb(15, 59, 141);
                    border: none;
                    border-radius: 20px;
                    padding: 10px 20px;
                    cursor: pointer;
                    overflow: hidden;
                }
        
                .wave_btn span {
                    position: absolute;
                    transform: translate(-50%, -50%);
                    border-radius: 50%;
                    animation: wave linear 0.8s infinite;
                    background-color: #fff;
                    
                }
        
                @keyframes wave {
        
                    from {
                        width: 0;
                        height: 0;
                        opacity: 0.7;
                    }
        
                    to {
                        width: 700px;
                        height: 700px;
                        opacity: 0;
                    }
                    
                }
            
JS:
                document.querySelectorAll('.wave_btn').forEach(item => {

                    item.addEventListener('click', function (e) {
        
                        e.preventDefault();
        
                        let x = e.offsetX;
                        let y = e.offsetY;
                        let waves = document.createElement('span');
        
                        waves.style.left = x + 'px';
                        waves.style.top = y + 'px';
        
                        item.appendChild(waves);
        
                        setTimeout(() => {
                            waves.remove();
                        }, 800);
        
                    })
        
                });
            

После копирования вышеупомянутых кусков кода у вас должна появиться такая кнопка:

Наша анимированная кнопка готова. В коде CSS рекомендуем изменять только внешние стили кнопки. Изменение технических стилей может привести к некорректной работе анимации. Также не советуем вносить изменения в структуру html (кроме текста) или JavaScript кода.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

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

Согласен