Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // HTML -------------->
- <button class="mouse-cursor-gradient-tracking">
- <span>Hover me</span>
- </button>
- // CSS -------------->
- .mouse-cursor-gradient-tracking {
- position: relative;
- background: #2379f7;
- padding: 0.5rem 1rem;
- font-size: 1.2rem;
- border: none;
- color: white;
- cursor: pointer;
- outline: none;
- overflow: hidden;
- }
- .mouse-cursor-gradient-tracking span {
- position: relative;
- }
- .mouse-cursor-gradient-tracking::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 .2s ease, height .2s ease;
- }
- .mouse-cursor-gradient-tracking:hover::before {
- --size: 200px;
- }
- JavaScript
- var btn = document.querySelector('.mouse-cursor-gradient-tracking')
- btn.onmousemove = function (e) {
- var x = e.pageX - btn.offsetLeft
- var y = e.pageY - btn.offsetTop
- btn.style.setProperty('--x', x + 'px')
- btn.style.setProperty('--y', y + 'px')
- }
- // JS -------------->
- var btn = document.querySelector('.mouse-cursor-gradient-tracking')
- btn.onmousemove = function (e) {
- var x = e.pageX - btn.offsetLeft
- var y = e.pageY - btn.offsetTop
- btn.style.setProperty('--x', x + 'px')
- btn.style.setProperty('--y', y + 'px')
- }
Add Comment
Please, Sign In to add comment