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.
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 at 360 deg and the shape of the background will be a circle. If you’re feeling difficulty understanding 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
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 to 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]
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 the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Social Icons Hover Animation | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<ul class="icons">
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
<li><a href="#"><span class="fab fa-github"></span></a></li>
<li><a href="#"><span class="fab fa-youtube"></span></a></li>
</ul>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{
margin: 0;
padding: 0;
}
html,body{
display: grid;
height: 100%;
place-items: center;
text-align: center;
}
.icons{
list-style: none;
}
.icons li{
height: 70px;
width: 70px;
display: inline-block;
margin: 0 10px;
cursor: pointer;
position: relative;
}
.icons li:before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
border-radius: 10%;
background: linear-gradient(45deg, #7b00e0, #ae31d9);
transition: all 0.3s ease-in;
}
.icons li:hover:before{
transform: rotate(360deg);
border-radius: 100%;
}
.icons li a span{
font-size: 27px;
line-height: 70px;
color: #fff;
transition: all 0.3s ease-out;
}
.icons li:hover a span{
transform: scale(1.2);
}
That’s all, now you’ve successfully created an Awesome Hover Animation on Social Media Icons using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
