Кнопки - неотъемлемая часть любого сайта и уникальность их стилизации делает сайт более запоминающимся для пользователей. В данном уроке попробуем написать анимацию кнопки сайта при клике, чтобы придать кнопкам максимальную динамичность.
Для создания такой кнопки вам надо перекопировать следующие часи кодов:
<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 кода.