Awesome Hover Animation on Social Media Icons using HTML and CSS

Hello reader, Today in this blog you'll learn how to create  Floating Social Media Icons with Hover Animation using only HTML & CSS. Previously I have shared a Scroll To Top or Back To Top Button using only HTML and CSS, now it's time to create a Social Media Button with Hover Animation.

Social Icons Widget: The Social Icons Widget represents small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, social icons are automatically displayed on your site, letting your visitors connect with you via your chosen networks.

As you can see in the image, this is a stylish Floating Social Media Widget, which is based on only HTML & CSS. There are some social media icons like Facebook, Twitter, Instagram, Github, and YouTube. 

All icon's background is in gradient-color that means two colors are mixed to create a background. At first, all icon's background has been square but when you'll hover on the particular icon the background rotates in 360 deg and the shape of background will be a circle. 

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Awesome Hover Animation on Social Media Icons).

Video Tutorial of Awesome Social Media Icons with Hover Animation

I hope you understood the basic codes and concepts behind creating this widget. And I believe you like this Hover Animation. You can use this Social Media Widget on your website, projects, and wherever you want. If you have basic knowledge of HTML & CSS, you can take this widget at the next level after changing some lines of code.

If you like this Social Media Widget with Hover Animation and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Awesome Hover Animation on Social Media Icons [Source Codes]

As always, before sharing the codes of this program. Let's a few talk about the main tags and codes of this program. As you have seen in the video this is a pure CSS program that is based in HTML & CSS only. This is a <ul> <li> program that's why we can easily create an icon list.

At first, I created a <ul> tag with the class name "icons" and placed all other <li> tag inside it. Inside <li> tag I created <a> then inside <a> tag I created <span> tag with font-awesome class name to show social media icons. In the CSS file, I placed all icons at the center using CSS grid. After that, I did basic style to <li> to create stylish icons.

In CSS, I set all icons to square shape with the gradient background color. Then when we hover on it, I rotate a particular icon in 360 deg with a circle background shape.

There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this program. But, don't worry you'll understand all codes and programs after getting the source code of this program.

To create this Awesome Social Media Widget. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.



Thanks for visiting, Keep visiting.

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post

Don't forget to Subscribe to our YouTube Channel.

Subscribe To CodingNepal