DEV Community

Cover image for Windows 10 button hover effect using HTML, CSS, and vanilla JS

Windows 10 button hover effect using HTML, CSS, and vanilla JS

Jash Gopani on April 23, 2021

Table of Contents Introduction Observations Getting Started The Crux Calculating the cursor position Creating the spotlight Applying...
Collapse
 
ankkaya profile image
Ankkaya • • Edited

Great workπŸ˜€

Collapse
 
thomasbnt profile image
Thomas Bonnet •

Cool animation, cool post !

Collapse
 
professor9833 profile image
Professor9833 •

Excellent post, helped me alot

Collapse
 
sandesh3 profile image
Sandesh Goli •

Attractive!!
I loved the way you posted

Collapse
 
jashgopani profile image
Jash Gopani •

I am glad you liked itπŸ˜€, thanks !

Collapse
 
jainamgala777 profile image
jainamgala •

Great work. Liked the concept.

Collapse
 
gregoriofrancisco99 profile image
GregΓ³rio Francisco •

Do U have this in video on YouTube, please?

Collapse
 
jashgopani profile image
Jash Gopani •

Unfortunately I don't have oneπŸ™ˆ, This is for the first time I have posted any kind of tutorial on internet. Hopefully some day, I'll post on YouTube also😁

Collapse
 
gregoriofrancisco99 profile image
GregΓ³rio Francisco •

Wow... first time!!! Your article is awesome. The matter you brought was amazing... Very helpful.
You're amazing, man! Keep doin' what U did.

Amazing!!!

Thread Thread
 
jashgopani profile image
Jash Gopani •

Thanks a lot, man πŸ™Œ. Such support and appreciation keeps me motivated to do moreπŸ˜‡

Collapse
 
nermin99 profile image
Nermin Skenderovic •

What if my cards have a border radius? Using this example I get square border corners even if I try to specify border-radius.

Collapse
 
mysticza profile image
Chris Boik •

I always wondered how it could be replicated.
Excellently done, even when viewed on mobile πŸ€€πŸ‘

Collapse
 
jashgopani profile image
Jash Gopani •

Thanks a lot, buddy πŸ˜€!

Collapse
 
arnavgu25774294 profile image
Arnav Gupta •

Great post! I specially liked the way you divided the article into steps which were difficult at start but then could be easily understood by the reader. Also very nicely presented.

Collapse
 
bhavish089 profile image
Bhavish089 •

It's Cool ,
but it don't work completely like windows 10 on hovering between two buttons .

Collapse
 
jashgopani profile image
Jash Gopani •

Thanks, for the effect between 2 buttons, check the grid hover effect

Collapse
 
badev profile image
Rabbit •

this is so cool, pls consider creating content on yt!

Collapse
 
jashgopani profile image
Jash Gopani •

Thanks a lot πŸ™Œ Will surely try to come up with more such content

Collapse
 
mihirgandhi profile image
Mihir Gandhi •

Great tutorial! Looking forward to read more of your work.