.. If you are new to my blog
you can have a look at my before posts.. and also subscribe for Much More Latest Updates.. Before Posts of CSS3 Category was not made by my own but shared it so that it will be helpful to you all..
So let's get back to it..
Make Sure That the Images Loads completely..
<style>
.mjn-metro-social
{
width:300px;
}
.mjn-metro-social li
{
position:relative;
cursor:pointer;
padding:0;
list-style:none;
}
.mjn-metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd
{
z-index:7;
float:left;
margin:2.5px;
position:relative;
display:block;
}
.mjn-metro-social .tw
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQulwbBMnKmsfRx0POzvWB2L96NKXsX7LZjoxQ33GNAcX7So9NFRAiG6Fe3R7nC42HksQLkgMY4SofZRzchlbbW_dGnRFBtx5t5entIzhlcytb1m94ojaaX_xBL2JAzoJMl5wH-Qu7Xuw/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mjn-metro-social .fb
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig0PkzBvJ6yX3wb3bA-FnBs3mldrtIpOsKEOmSWPAniZThvUnV75mjGu8ZnA5a2Scx_f9Z-om5OP57CPaGbsj9rKbY1I0KVT_imrB47BFIjiw9xAk_uMf4Go4aCUmsMz0nnJ2yMLoBVZ8/h120/facebookf.png.png) no-repeat center center #1f69b3;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mjn-metro-social .gp
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2BXQh4OB62iwqr6bxaehbhAYmpzMa6iqzFVuT9KaIitHepXXhcCI6FkjOfbFV31PGat-8ivlSibqnqzYrcXcd-NFFluDQXePnX47zVrnZsoo_SE6c40BIhyphenhyphenbY2LhYLWrNbnbA0OxT00/h120/google+plus.png) no-repeat center center #da4a38;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mjn-metro-social .fd
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWik21LDLYj6zRL0FnbdbT_B6IeTwEkK2L95p4b59u2u6DZLu3MmNwUl5uzoweLXsLHP5S-NDfxU0qFaJw6T6w7o2UGElDUMw9DYpN2J2kCI4zJIhJiNP8pi7YRKbCiTgIxcTLdI32QA/h120/feed.png) no-repeat center center #e9a01c;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mjn-metro-social li:hover .fb
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoufjylJBmxED6WGURsnNgtpBOyWSqC-SmKMlIdsyh_IwyJhnrBgwFeGI4QEtny3oFetBqZgHO7snxAJYtdIm-ZSEtNK7Q1-DyUf1GNW6X4eZ3KlTiL1wYi4cBtEPsKJBqSvplEzyGVVs/h120/facebookfh.png) no-repeat center center #1f69b3;
box-shadow:0px 0px 6px 3px #217BC0;
-webkit-box-shadow:0px 0px 6px 3px #217BC0;
-moz-box-shadow:0px 0px 6px 3px #217BC0;
-o-box-shadow:0px 0px 6px 3px #217BC0;
-ms-box-shadow:0px 0px 6px 3px #217BC0;
}
.mjn-metro-social li:hover .tw
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXkUZeAqg6YBHVBNkDTurN2yeGTnC2K9KQT9VC7OULvF4ycuKo27_68Hq-tsMDJWC1eRRKeu-R6DP8gn0FguTsUzEDu4POC4_cwqc5Q3_sU7GhU3-cYBmy_uYBzS4090wRCYwtXs-CyQ4/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;
box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.mjn-metro-social li:hover .gp
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtxhYdCkrpw9XOb_o2ZrFnC6MdR2FL6_MAoT1D2AO6E4QPvehzSQAg5Nu67vWXZU1brCbBkYJ9rKTXCh782N1IiQdeRDCKS8ZkRAkous_Vsor2l04fw9_k5fMqP-HaQPTxTzg1sDUHxg/h120/google+plush.png) no-repeat center center #da4a38;
box-shadow:0px 0px 6px 3px #F43431;
-webkit-box-shadow:0px 0px 6px 3px #F43431;
-moz-box-shadow:0px 0px 6px 3px #F43431;
-o-box-shadow:0px 0px 6px 3px #F43431;
-ms-box-shadow:0px 0px 6px 3px #F43431;
}
.mjn-metro-social li:hover .fd
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9RPW5iPvlSbYtgEJg_2-IcrmvKXN9Mo2D98Z1FPQJMsucDjDghuLobivNokqsnf0bZ4nNOT53TIzbz6F18ZnqkTmjOE_pbAZ2b-7EgAnBhT-N6lfHpNp1P8ysE0Tel2gvb_o51KgKoU/h120/feedh.png) no-repeat center center #e9a01c;
box-shadow:0px 0px 6px 3px #e9a01c;
-webkit-box-shadow:0px 0px 6px 3px #e9a01c;
-moz-box-shadow:0px 0px 6px 3px #e9a01c;
-o-box-shadow:0px 0px 6px 3px #e9a01c;
-ms-box-shadow:0px 0px 6px 3px #e9a01c;
}
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 280px;
}
/* Form text input */
.form-wrapper input {
width: 215px; height: 20px; padding: 10px 5px;
float: left;
font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
box-shadow: 0 0 6px rgba(0,0,0,.3) inset;
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
border-color: #51a7e8;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px; width: 75px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUHg7y6wjPhif11-U0822G0qf7lu-LaG_gMpHHNVB0CA0eeiF3zrX8pWMfhZ05whaTBN6aydnGfupwQ76uT17jAHigBtzOmuQEcsoDAjFtW7ko21EPspbfVgcrEBIZuUXH5Exe0D7Lgc/h120/1367665345_search.png) no-repeat center center #26B11E;
border-radius: 0 0 0 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper button:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUHg7y6wjPhif11-U0822G0qf7lu-LaG_gMpHHNVB0CA0eeiF3zrX8pWMfhZ05whaTBN6aydnGfupwQ76uT17jAHigBtzOmuQEcsoDAjFtW7ko21EPspbfVgcrEBIZuUXH5Exe0D7Lgc/h120/1367665345_search.png) no-repeat center center #26B11E;
box-shadow:0px 0px 6px 3px #44D816;
-webkit-box-shadow:0px 0px 6px 3px #44D816;
-moz-box-shadow:0px 0px 6px 3px #44D816;
-o-box-shadow:0px 0px 6px 3px #44D816;
-ms-box-shadow:0px 0px 6px 3px #44D816;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUHg7y6wjPhif11-U0822G0qf7lu-LaG_gMpHHNVB0CA0eeiF3zrX8pWMfhZ05whaTBN6aydnGfupwQ76uT17jAHigBtzOmuQEcsoDAjFtW7ko21EPspbfVgcrEBIZuUXH5Exe0D7Lgc/h120/1367665345_search.png) no-repeat center center #26B11E;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #26B11E transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #26B11E;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #26B11E;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
</style>
<div class="mjn-metro-social">
<li><a class="fb" href="
http://www.facebook.com/mjntech"></a></li>
<li><a class="tw" href="
http://twitter.com/manjunathg17"></a></li>
<li><a class="gp" href="
https://plus.google.com/103741144523748761550"></a></li>
<li><a class="fd" href="
http://feeds.feedburner.com/mjntech"></a></li>
<form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;">
<input id="form-wrapper input" name="q" placeholder=" Search here.. " required="" type="text" />
<button type="submit"></button>
</form><br />
