andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
snippets/mouse-cursor-gradient-tracking.md
View File

@ -5,6 +5,10 @@ tags: visual,interactivity,advanced
A hover effect where the gradient follows the mouse cursor.
- `--x` and `--y` are used to track the position of the mouse on the button.
- `--size` is used to keep modify of the gradient's dimensions.
- `background: radial-gradient(circle closest-side, pink, transparent);` creates the gradient at the correct postion.
```html
<button class="mouse-cursor-gradient-tracking">
<span>Hover me</span>
@ -56,9 +60,3 @@ btn.onmousemove = function(e) {
btn.style.setProperty('--y', y + 'px');
}
```
#### Explanation
- `--x` and `--y` are used to track the position of the mouse on the button.
- `--size` is used to keep modify of the gradient's dimensions.
- `background: radial-gradient(circle closest-side, pink, transparent);` creates the gradient at the correct postion.