Created
March 30, 2022 07:07
-
-
Save jenux/e5d6b57970340a0e0f8fb5febfcd2b33 to your computer and use it in GitHub Desktop.
Mouse cursor gradient tracking #CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| <button class="mouse-cursor-gradient-tracking"> | |
| <span>Hover me</span> | |
| </button> | |
| */ | |
| .mouse-cursor-gradient-tracking { | |
| position: relative; | |
| background: #7983ff; | |
| 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 0.2s ease, height 0.2s ease; | |
| } | |
| .mouse-cursor-gradient-tracking:hover:before { | |
| --size: 200px; | |
| } | |
| /* | |
| * | |
| let btn = document.querySelector('.mouse-cursor-gradient-tracking'); | |
| btn.addEventListener('mousemove', e => { | |
| let rect = e.target.getBoundingClientRect(); | |
| let x = e.clientX - rect.left; | |
| let y = e.clientY - rect.top; | |
| btn.style.setProperty('--x', x + 'px'); | |
| btn.style.setProperty('--y', y + 'px'); | |
| }); | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment