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

button

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

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

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);
        
                    })
        
                });

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

button

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

CSS Верстка