Animated Social Media Icons With Pure CSS

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

Comments

[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

[Folarin Lawal]

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

[Folarin Lawal]

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

[M Adeel Ahsan]

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

[kpkrish]

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

[Simon Köhler]

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