DEV Community

Cover image for Animated Social Media Icons With Pure CSS
Folarin Lawal
Folarin Lawal

Posted on

Animated Social Media Icons With Pure CSS

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

Discussion (6)

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
Folarin Lawal Author

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

Collapse
madflows profile image
Folarin Lawal 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.