DEV Community

loading...
Cover image for Animated Social Media Icons With Pure CSS

Animated Social Media Icons With Pure CSS

madflows profile image Lawal Folarin ・1 min read

This is my First Time doing this, Rate Please :'(

Discussion (6)

pic
Editor guide
Collapse
jamesthomson profile image
James Thomson

It's a good start. As a usability rule of thumb, hovering something should never cause layout shift. In your case, when you hover the "Hover us please" text, it causes the width to change which in turn causes layout shift.

I've quickly updated your Codepen with a couple of changes to help show you how to center your box and use widths to avoid layout shift.

codepen.io/getreworked/pen/BaQxpBW

Collapse
madflows profile image
Lawal Folarin Author

I also Made it in a way that the background color changes as you click on the icons :)

Collapse
madflows profile image
Lawal Folarin Author

I've Worked on that too, I'll update the codepen now

Collapse
madeelahsan profile image
M Adeel Ahsan

great. check these out ianlunn.github.io/Hover/

Collapse
kpkrish profile image
kpkrish

Is there some way to be test
Hover on an Android phone with touch ?

Collapse
typo3freelancer profile image
Simon Köhler

Nice work, I would add some fixed with and height to the icons to make the hover effect more fluent.