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

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

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

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

            

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

                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 кода.