Social icons with shadow hover effect using CSS and HTML

Social-icons-box-image-shadow-hover-effects-css-html-codes

Social networks play a vast role in getting more traffic to your blog and gaining fame to your blog.So it was very important to make your social media buttons attractive to make your visitors look over and follow your blog/site through social media. So in this tutorial you are about to see codes that make the social media buttons attractive by giving you a shadow hover effect when visitors hover over it using HTML and CSS.

In this code we have placed all the buttons inside a <p> tag that is a paragraph tag to give a tab effect to all the buttons. Now lets move into the coding part of this beautiful social media buttons. The HTML and CSS coding of this effect was simple to understand.

CSS CODING:

<style type="text/css">
#socic{
  background-color:#000000;
  border:4px solid black;
  border-radius:10px 10px 10px 10px;
  height:50;
  float:right;
  padding:10px;
  display:inline;
   }
img.sty2:hover{
  background-color:#ffffff;
  -moz-box-shadow:0px 0px 3px 5px #ffffff;
  -webkit-box-shadow:0px 3px 0px 5px #ffffff;
   box-shadow:0px 0px 3px 5px #ffffff;
   border-radius:6px 6px 6px 6px;
   -webkit-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
    transition: all 1s ease;                       
                        } 
</style>

The background color of the paragraph in which the buttons located can be changed by replacing the #000000 in the above codes to your desired color code.The shadow color of the hovering effect can be changed by replacing the #ffffff in the above codes to your desired codes

HTML CODING:

This HTML part comprises of the image links and defining the class to it.You must upload your buttons initially to a photo hosting service and then obtain the links from there and use it in your code.I am using “Photobucket” which was really great in photo hosting.

<p id="socic">
<b style="color:#ffffff;position:relative;bottom:20px">FOLLOW US</b> 
&nbsp;&nbsp;
<a href="http://www.facebook.com/gadgetronicx" target="_blank"><img class="sty2" width="50" height="50" src="Image URL" /></a>
<a href="http://www.twitter.com/gadgetronicx" target="_blank">
<img class="sty2" width="50" height="50" src="Image URL" />
</a>
<a href="http://gadgetronicx.blogspot.com/feeds/posts/default" target="_blank">
<img class="sty2" width="50" height="50" src="Image URL" /></a>
<a href="https://plus.google.com/104085180662752064987" target="_blank">
<img class="sty2" width="50" height="50" src="Image URL" /></a>
</p>

Now in this above codes replace the URL’s with your social network URL’s and place your own image src URL’s. And your Social media buttons is now ready add it to your blog/site and it will increase your followers. Using HTML and CSS you would have known many image hover effects till today add this one too to your list from today