DEV Community

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

Posted on

9 3

Animated Social Media Icons With Pure CSS

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

Top comments (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

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

Collapse
 
madflows profile image
Folarin Lawal

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.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay