How to Add Social Share Icons with Unique Hover Effects in a Minute

Hey Learner, Welcome back with sweet and creative concept of Social Share Icons with Unique Hover Effects in a Minute.

The social media share buttons are a very important part of your website. They allow you and your users to quickly share your content across social media, expanding your audience in seconds with just a few clicks. While it is a small feature to be implemented, you can be creative with it and make the social share buttons interactive in a way that adds a unique experience for your visitors.

One of the ways of doing it is simply using the CSS hover feature. In this tutorial, we’ll show you how to do that.

You can use any kind of image file you want for your icons such as PNG or SVG. In this tutorial, we wanted to keep things simple and used an icon font, FontAwesome.

This method saves time as you don’t have to individually download icon images and set their sizes individually. It also cuts down the lines of code on your HTML or CSS file. With FontAwesome, you can simply add the CDN below to add icons to your website.

We’re also using Bootstrap to organize our grid layout. Please insert the external links below on your HTML file to get started:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

The code below is straightforward.

We have a ul list that contains each of the social media links as a list item. If you’d like to add more social media links, all you have to do is create another li item and add your icon inside the i tag.

We’re using Bootstrap’s list-inline class which automatically makes a list horizontal so we don’t have to add additional lines on the CSS file to make our list items inline.

<div class="col-sm-5 col-md-4 col-lg-3 social-links text-center">
    <ul class="list-inline mt-5">
        <li class="list-inline-item"><a href="#"><i class="fa fa-facebook social-icon" aria-hidden="true"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fa fa-twitter social-icon" aria-hidden="true"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fa fa-linkedin social-icon" aria-hidden="true"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fa fa-envelope social-icon" aria-hidden="true"></i></a></li>
    </ul>
</div>

CSS

After we’re done with building the structure of the social media share list, let’s get to how we can display them beautifully with interesting hover effects. Copy and paste the code below in your CSS file:

.fa,
.fas {
    font-family: 'FontAwesome';
}

.social-icon {
    color: #fff;
    background: #221B14;
    font-size: 1em;
    border-radius: 50%;
    line-height: 2.2em;
    width: 2.1em;
    height: 2.1em;
    text-align: center;
    display: inline-block;
}

li:hover {
    transform: translateY(-4px);
    transition: 0.3s;
}

FontAwesome comes with the default .fa or .fas classes. We need to select those classes and set their font-family as “Font Awesome”, otherwise, the icons will show up as blank squares. 

In order to put the icons in a circular border background, we need to give a specific value to the icon font-size, line-height, and the circle width and height. First, we make the border circle by giving setting its radius as 50%. The icon font size is up to you. Just make sure that the line-height, width, and height values are about as twice as big as the font-size. That way your icon will be well placed in the center, both horizontally and vertically.

Once we ensure that every element in our list is aligned nicely, we can get to the fun part, the hover effect. We’re making each of the icons move up 4px on hover. All we need to do is select each list item add a :hover after it and write transform: translateY(-4px).Then, while this is optional, we set the transition to 0.3s to so that when we hover over the icon, it will move up gradually in a smooth way rather than move up abruptly.

There we have it. You can hover over the icons on JSFiddle below to see how they move on hover:

Thank you for reading, and let’s connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter, and ask questions and give your valuable suggestions.