DEV Community

Shubham Jadhav
Shubham Jadhav

Posted on

14 3

Neumorphic Social Media Buttons in CSS

Neumorphic Social Media Button using pure CSS ๐Ÿ‘‡

Top comments (5)

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ โ€ข โ€ข Edited

There is an issue - by removing the outline there is no way of seeing if the button is active if you have got to it using the keyboard (tabbed to it for example). Could perhaps be solved by making the button appear in the 'down' state with :focus?

Collapse
 
kiddcreator profile image
kidd-creator โ€ข

This might help though

button:active{
    transform: scale(0.89)
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ โ€ข

Yeah - anything visual. Needs to be on :focus not :active though

Thread Thread
 
kiddcreator profile image
kidd-creator โ€ข

okay thanks

Collapse
 
eleanorgilbert profile image
Eleanor Gilbert โ€ข

Thanks, I use these Social Media Buttons

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools canโ€™t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay