Social Media buttons with hover effect

• Share on Twitter
• Share on Facebook
• Share on StumbleUpon
• Share on Delicious
• Share on Digg
• Share This!

Start with the name of Allah who is most merciful, In this article I will tell you how you can add social media buttons with hover effect. You saw social media buttons on other sites and blogs, but this social media buttons are not a simple buttons. When you hover your mouse to this social media buttons it will expand and will change there image. This social media buttons with hover effect is very stylish and beautiful buttons. Hope you like this social media buttons with hover effect.

Live Demo!!

How to add social media buttons with hover effect to Blogger

• Go to Blogger.com.
• Login to your blog.
• Then go to template >> customized >> advanced >> add CSS and paste the following below code to CSS area.

.hovereffect:hover
{
width: 250px;
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease;
}

• Then click apply to blog.

• Now go to layout >> add a gadget >> HTML/Javascript and paste the following below code in HTML area.

<a href="facebook.com"><img class="hovereffect"src="http://t2.gstatic.com/images?q=tbn:ANd9GcRH873-Q1et_jYIXszW82jAIz5hJPGTDeNYwFCO2zV4KfdagLUx" width="150px" height="150px"
onmouseover="this.src='http://www.fwccworld.org/css/images/facebook.jpg'"
onmouseout="this.src='http://t2.gstatic.com/images?q=tbn:ANd9GcRH873-Q1et_jYIXszW82jAIz5hJPGTDeNYwFCO2zV4KfdagLUx'" /></a>
<a href="plus.google.com"><img class="hovereffect"src="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg" width="150px" height="150px"
onmouseover="this.src='http://www.pearse-trust.ie/Portals/43760/images/Follow%20Pearse%20Trust%20on%20Google%20Plus.jpg'"
onmouseout="this.src='http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg'" /></a>  <br/></a>
<a href="pinterest.com" target="_blank"><img class="hovereffect"src="http://www.shoutlet.com/blog/wp-content/uploads/2013/03/pinterest_badge_red.png" width="150px" height="150px"
onmouseover="this.src='http://mommyedwards.com/wp-content/uploads/2013/01/follow-me-on-pinterest-v01.jpg'"
onmouseout="this.src='http://www.shoutlet.com/blog/wp-content/uploads/2013/03/pinterest_badge_red.png'" /></a>
<a href="twitter.com"><img class="hovereffect"src="http://t1.gstatic.com/images?q=tbn:ANd9GcTME0j5vvmTav1_EAhLtE84zVUbm7Q6St6YMI50Q_wXfns2C46H" width="150px" height="150px"
onmouseover="this.src='http://www.twittericon.com/wp-content/uploads/2010/08/glossy-cute-blue1.png'"
onmouseout="this.src='http://t1.gstatic.com/images?q=tbn:ANd9GcTME0j5vvmTav1_EAhLtE84zVUbm7Q6St6YMI50Q_wXfns2C46H'" /></a>

Customization 

• Change Facebook.com  with your Facebook page url.
• Change Twitter.com with your twitter url.
• Change plus.Google.com with your Plus Google url.
• Change Pinterest.com with your Pinterest url.

• Click to save and social media buttons with hover effect has been applied to your blog

Is the social media buttons with hover effect bug to your site or blog? Like this:

Don't worry I have also solution for this problem just copy all the images and save these pictures to your PC and then upload it to your blog and then replace all the images link with your uploaded pictures link. Hope social media buttons with hover effect will work properly.