Interactive Social Media Share Buttons (HTML+CSS)

Image Source

Hello everyone! I would like to show you how to integrate social media share buttons in the footer of your website in 3 simple steps. This is clearly a guide for beginners who just started their journey through HTML and CSS. There are many ways to do so and you can easily find a few on the web but I find this one the best. Our social media buttons would also have a hover effect – they are going to spin.

Personally, I don’t really do much coding but this is something I tried for myself and it worked really nice. Just to be clear, I have made this gif so you could tell if this is something you would like to do. So, here’s how it would look when we are done.

I have used a blank webpage because I didn’t want to abuse anyone with irrelevant code. Anyways, let’s cut it to the case.

Step 1 – Find & Download Social Media Icons

Make sure you use free images or credit the author so you don’t face any authorship problems. I have used Iconfinder but I’m not sure if they allow free usage of their images if you are not a subscriber. Pay attention to the resolution of an image – it should not be too big or too small. Something around 100-200px is completely enough. You don’t even have to download icons, you can also access them via URL. Keep in mind that the image can be deleted from the server that would lead to an issue. Thus, it’s better to have all the files on your own server.

Step 2 – Add Social Media Button Images

In my case, I have a completely blank webpage and I want these images in my footer. Here’s my index.html code:

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title>Interactive SM buttons</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<footer>
<div class=”SM_buttons”>
<a href=”#”><img src=”images/instagram.png” height=”50px”></a>
<a href=”#”><img src=”images/facebook.png” height=”50px”></a>
<a href=”#”><img src=”images/linkedin.png” height=”50px”></a>
<a href=”#”><img src=”images/pinterest.png” height=”50px”></a>
<a href=”#”><img src=”images/twitter.png” height=”50px”></a>
<a href=”#”><img src=”images/youtube.png” height=”50px”></a>
</div>
</footer>
</body>
</html>

I’m using <img> tag inside <a> tag to get a clickable image. I have downloaded icons but they are located in subfolder “images” so that’s why in the source attribute I had to put such a path – “images/youtube.png”. You can put URLs of icons you found instead (if you don’t want to download any). If you want links to actually work – put the URLs of your SM profiles instead of “#”. The next part is the most interesting.

Step 3 – Simple CSS Would Do It

If you think animation would be the hardest part – you are wrong. We can easily make our icons rotate with the help of transition and transform attributes. We wouldn’t want all images to rotate so we apply this style only to images in the .SM_buttons class. Here’s how my CSS file looks:

footer {
position: fixed;
left: 0;
bottom: 0;
height: 70px;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
.SM_buttons img{
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.SM_buttons img:hover{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

You can read more about this solution on Stack Overflow. An icon has 8 seconds to do 360deg. That’s actually it. Everything should work now. You can now try and edit the code, play with it and see how it works.

About the Author:

George Fironov is the Founder and CEO of Talmatic, a concierge-type service focused on helping tech companies to hire dedicated remote software engineers. I’m passionate about people, technology and innovation. I dedicated my career to building professional teams that empower our customers with the latest tech expertise they need to be successful.