Анимированная кнопка на JavaScript и CSS
 | |
| Прекрасная кнопка с красивой анимацией, где переменены градиенты с использованием JavaScript и CSS, что реагирует на наведенный курсор на ее. Сама суть состоит в том, если на стандартной кнопки, что аналогично подключены на стилистику, и там есть оригинальные и вполне уникальные по своему дизайн варианты. То здесь совершенно по другому реагирует на курсор, ведь можно в любое место наводит его, и только там происходит оригинальный трюк, который полностью создан на градиентах, где задействовано несколько оттенков цвета. И теперь вы сами можете решить на какую тематику поставить, ведь по дизайн она просто совершенно отлично подойдет на многие сайты с разным тематическим наполнением. Только когда будете прописывать основной код, то с ним идет скрипт, который отвечает за все эффекты, вот его можно расположить ниже основного кода. Так выглядит при открытие страницы или сайта:  Приступаем к установке: HTML Код <button class="singkapvo-gesionalem"> <span>Нужно навести на кнопку клик</span> </button> CSS Код .singkapvo-gesionalem { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f50b46; padding: 25px 30px; border: none; color: #e4e4e4; font-size: 23px; cursor: pointer; outline: none; overflow: hidden; border-radius: 85px; } .singkapvo-gesionalem span { position: relative; pointer-events: none; } .singkapvo-gesionalem::before { --size: 0; content: ''; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, #4510dc, rgba(255, 255, 255, 0)); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: width .1s ease, height .3s ease; } .singkapvo-gesionalem:hover::before { --size: 397px; } JS Код <script> document.querySelector('.singkapvo-gesionalem').onmousemove = function (e) { var x = e.pageX - e.target.offsetLeft; var y = e.pageY - e.target.offsetTop; e.target.style.setProperty('--x', x + 'px'); e.target.style.setProperty('--y', y + 'px'); }; </script> Также предоставлена demo площадке, что изначально все эффекты можно посмотреть в реальности. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |