Animated Social media icons🤳

atulcodex profile image Atul Prajapati ・1 min read

Hello 👋, my dear Dev friends hope you all doing well and Happy Raksha Bandhan. Today in this dev post you will learn how to make amazing Social media icons with animated effect on hover. 🛫

I have just made this small web section in 🛫⛵ codepen so you can access my entire code and make some changes according to your skill.


markdown guide

Amazing animation mate! 👏 👏 I really enjoyed this one. You could do another enhancement to make it awesome on Firefox aswell as the edges seems to be curly and aliased. Here is a snapshot on Firefox 79:

box-shadow antialiasing

To prevent it, just insert the following CSS,

.sm a{
 box-shadow:0 0 0 1px rgba(0,0,0,0);

.sm a::before, .sm a::after{
 box-shadow:0 0 0 1px rgba(0,0,0,0);

It will apply an invisible border that will do the job of anti-aliasing. That's the hidden power of box-shadow! 💎 🧙


I have pasted the codes and it looks more sharp, Thanks for your invension


Ok I will do that, you can check out put on the same Dev post 🙏 thanks for your time and consideration 💐