Шикарная кнопочка с градиентом, который реагирует на курсор мышки с использованием CSS3 и Javascript
Очень симпатичная кнопочка, которая реагирует на курсор мышки. Градиент будет следовать за мышкой. Выглядит очень эффектно!
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.button { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f72359; padding: 1em 2em; border: none; color: white; font-size: 1.2em; cursor: pointer; outline: none; overflow: hidden; border-radius: 100px; } .button span { position: relative; pointer-events: none; } .button::before { --size: 0; content: ''; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, #4405f7, transparent); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: width .2s ease, height .2s ease; } .button:hover::before { --size: 400px; } |
2#: Следующий код в то место, где хотите видеть такую кнопочку:
|
1 2 3 4 5 6 7 8 9 10 11 |
<button class="button"> <span>Наведи на меня. Я - офигенна!</span> </button> <script> document.querySelector('.button').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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
