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
 
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
 
jainamgala777 profile image
jainamgala

Great work. Liked the concept.

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
 
professor9833 profile image
Professor9833

Excellent post, helped me alot

Collapse
 
thomasbnt profile image
Thomas Bnt

Cool animation, cool post !

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
 
mihirgandhi profile image
Mihir Gandhi

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

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
 
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
 
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.