Кнопка с эффектом отслеживания курсора

Кнопка с эффектом отслеживания курсора

HTML разметка

<button class="btn">

<span>t.me/WebTaverna</span>

</button>

CSS стили для создания градиента

.btn {

padding: 20px 30px;

position: relative;

background: #7983ff;

overflow: hidden;

}

.btn span {

position: relative;

pointer-events: none;

}

.btn::before {

--size: 0;

content: '';

position: absolute;

left: var(--x);

top: var(--y);

width: var(--size);

height: var(--size);

background: radial-gradient(circle closest-side, pink, transparent);

transform: translate(-50%, -50%);

transition: width 0.2s ease, height 0.2s ease;

}

.btn:hover::before {

--size: 200px;

}

Отслеживание курсора мыши с помощью JavaScript

const btn = document.querySelector('.btn')

btn.addEventListener('mousemove', e => {

const rect = e.target.getBoundingClientRect()

const x = e.clientX - rect.left

const y = e.clientY - rect.top

btn.style.setProperty('--x', x + 'px')

btn.style.setProperty('--y', y + 'px')

})

👍- если было полезно | ➡️ WebTaverna