أريد كود أحلى الشبكات الأجتماعية...

أريد كود أحلى الشبكات الأجتماعية الموجود على يمين منتدى أحلى منتدى

تفضل

الكود:

<div align="center">
   <div style="text-align:center">
              <a class="social-button fb-but" href="https://www.facebook.com/ahlamontadae" target="_blank" title="Facebook"></a>  <a class="social-button tw-but" href="https://twitter.com/ahlamontada" target="_blank" title="Twitter"></a>  <a class="social-button gp-but" href="https://plus.google.com/+Ahlamontada/" target="_blank" title="Google+"></a>  <a class="social-button yt-but" href="https://www.youtube.com/user/ahlamontadaTV" target="_blank" title="Youtube"></a>  <a class="social-button rs-but" href="/feed/?f=1" target="_blank" title="Update Feed"></a>
   </div>
</div>

<style>
/* -- 20. SOCIAL BUTTONS -- */
#follow_fdf {
  float: right;
  background: url('http://i21.servimg.com/u/f21/19/33/86/51/follow11.png') no-repeat scroll 0px 5px transparent;
  padding:5px 0px 0px 155px;
  height:40px;
}

.social-button {
  background:url('http://i18.servimg.com/u/f18/18/21/41/30/fa_fol12.png') no-repeat 0px 0px #ADADAD;
  background-color:rgba(0, 0, 0, 0.3);
  border-radius:3px;
  display:inline-block;
  height:32px;
  width:32px;
  margin:3px;
  transition:250ms background-color;
}
.social-button:hover { background-color:#000 }

.social-button.fb-but { background-position:-0px 0px }
.social-button.fb-but:hover { background-color:#3B5998 }

.social-button.tw-but { background-position:-32px 0px }
.social-button.tw-but:hover { background-color:#5EA9DD }

.social-button.gp-but { background-position:-64px 0px }
.social-button.gp-but:hover { background-color:#DD4B39 }

.social-button.pi-but { background-position:-96px 0px }
.social-button.pi-but:hover { background-color:#BB0000 }

.social-button.yt-but { background-position:-128px 0px }
.social-button.yt-but:hover { background-color:#E52C27 }

.social-button.rs-but { background-position:-160px 0px }
.social-button.rs-but:hover { background-color:#FAA21B }

</style>

وهذا كود آخر
يوضع في اي مكان يقبل  HTML

الكود:

<div style="text-align:center">
              <a
class="social-button fb-but" href="رابط حساب الفيس بوك" target="_blank"
title="Facebook"></a>   <a class="social-button tw-but"
href="رابط حساب التويتر" target="_blank" title="Twitter"></a> 
 <a class="social-button gp-but" href="رابط حساب القوقل بلاس"
target="_blank" title="Google+"></a>   <a
class="social-button yt-but" href="رابط حساب قناتك في اليوتيوب"
target="_blank" title="Youtube"></a>   <a
class="social-button rs-but" href="/feed/?f=1" target="_blank"
title="Update Feed"></a>
   </div>

وهذا الكود  أيضا في ورقة  CSS

الكود:

.social-button {
  background:no-repeat 50% 50% #BBB;
  background-color:rgba(0,0,0, 0.3);
  border-radius:3px;
  display:inline-block;
  height:32px;
  width:32px;
  margin:3px;
  -webkit-transition:300ms;
     -moz-transition:300ms;
       -o-transition:300ms;
          transition:300ms;
}
.social-button:hover { background-color:#000 }
.social-button.fb-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/fb11.png) }
.social-button.fb-but:hover { background-color:#3B5998 }
.social-button.tw-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/tw10.png) }
.social-button.tw-but:hover { background-color:#5EA9DD }
.social-button.gp-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/gp10.png) }
.social-button.gp-but:hover { background-color:#DD4B39 }
.social-button.pi-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/pi10.png) }
.social-button.pi-but:hover { background-color:#BB0000 }
.social-button.yt-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/yt10.png) }
.social-button.yt-but:hover { background-color:#E52C27 }
.social-button.rs-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/rs10.png) }
.social-button.rs-but:hover { background-color:#FAA21B }
.social-button:hover { background-color:#000 }
.social-button.fb-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/fb11.png) }
.social-button.fb-but:hover { background-color:#3B5998 }
.social-button.tw-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/tw10.png) }
.social-button.tw-but:hover { background-color:#5EA9DD }
.social-button.gp-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/gp10.png) }
.social-button.gp-but:hover { background-color:#DD4B39 }
.social-button.pi-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/pi10.png) }
.social-button.pi-but:hover { background-color:#BB0000 }
.social-button.yt-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/yt10.png) }
.social-button.yt-but:hover { background-color:#E52C27 }
.social-button.rs-but { background-image:url(http://i38.servimg.com/u/f38/18/21/41/30/rs10.png) }
.social-button.rs-but:hover { background-color:#FAA21B }