How to create cool social media rollover Icons

Social media icons are very important part of a website which allows users to share the websites contents on different social websites.  Now a days people spend more time on social websites as compared to other websites so by properly placing social media icons on your website you can  gain new visitors and expand reach of your quality content.  So now,  we are going to create simple social media icons which upon hover changes its color.

Rollover Icons Demo

Difficulty –  Easy
Time  –  3-5 minutes
Skills-  HTML/CSS

Step 1 : THE HTML

 <a class=”facebook icon_roll” href=”URL”></a>
<a class=”twitter icon_roll” href=”URL”></a>
<a class=”instagram icon_roll” href=URL”></a>
<a class=”google icon_roll” href=”URL”></a>
<a class=”linkedin icon_roll” href=”URL”></a>
<a class=”pintrest icon_roll” href=”URL”></a>

Explanation : The HTML used here is very simple and self explanatory. We are actually creating two classes named “icon_roll” and “facebook”(social icon ). The “icon_roll” class is used to apply all the effect and properties to the icon like width, height, box-shadow, transition e.t.c.  The other classes used here inserts the icon. For example class=”facebook” used here inserts a facebook icon similarly “twitter” class is used for placing twitter icons and so on. Note that the class=”facebook icon_roll” are two seperate classes “facebook” and “icon_roll” written together for convinience.

Step 2 : THE CSS

<style>
.icon_roll {
width:48px;
height:48px;
float:left;
margin:5px;
}
.icon_roll:hover {
background-position: 0px -48px;
transition:all ease 0.3s;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-moz-transition:all ease-in 0.3s;
-o-transition:all ease-in 0.3s;
-ms-transition:all ease-in 0.3s;
-webkit–o-transition:all ease-in 0.3s;
}
.facebook {
background-image:url(facebook.png);
}
.twitter {
background-image:url(twitter.png);
}
.instagram {
background-image:url(instagram.png);
}
.pintrest {
background-image:url(pinterest-hover.png);
}
.google {
background-image:url(google.png);
}
.linkedin {
background-image:url(linkedin.png)
}
</style>

Explanation :  The simple concept behind this rollover effect is that we are using two images, one color and one black and white spliced on top of each other. To create that cool rollover effects upon hover effect, we are simply changing the background position property of the image. Next, we are adding the icons using the “background-image” property placed under another class which is named after related social icon.

Download the Rollover Icon set from here.