إضافة أزرار المواقع الأجتماعيه احترافيه متحركه بتأثير css3

كما عودتكم خبراء الحاسوب على الجديد ، أقدم لكم اضافة مميزة في درس اليوم ازرار الشبكات الاٍجتماعية , مع تأثيرات Css3 بشكل رائع و تأثيرات متحركة فعند تمرير مؤشر الماوس فوقها تدور بشكل جميل و عند اٍزالة المؤشر تدور بالعكس لتعود اٍلى حالتها الاٍبتدائية وتحتوي الاٍضافة على أزرار فيسبوك وتويتر واليوتيوب. اضافة اٍلى كونها تزيد من معجبيك ومتابعيك عبر المواقع الاجتماعية .

إضافة أزرار المواقع الأجتماعيه احترافيه متحركه بتأثير css3

<div id="social">
<ul class="social-sidebar">
<li><a href="http://www.facebook.com/computerexp" target="_blank " class="fa" title="صفحتنا على الفيس بوك"></a></li>
<li><a href="http://www.twitter.com/mostafatalaat65" target="_blank " class="tw" title="صفحتنا على تويتر">twitter</a></li>
<li><a href="http://www.youtube.com/geekmostafa" target="_blank " class="yo" title="قناتنا على اليوتيوب">youtube</a></li>
</ul>
</div>
<style>
#social .social-sidebar li a, .social-sidebar li a:visited {
  width: 40px;
  height: 40px;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  opacity: 0.2;
}
#social {
}
#social .social-sidebar {
  margin-top: 10px;
  float: left;
  margin-left: 13px;
  margin-bottom: 11px;
}
#social .social-sidebar li {
  float: left;
  list-style: none;
  width: 69px;
  height: 68px;
  margin: 0 13px;
}
#social .social-sidebar li .tw {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMuCMe9pRLhGgBaZ0VQ_ok6uy8siQwwVmLUGRJH2QsPle_SH8NCuI2ymhrhLpFMyNMr6kTp6-27d7IRptzqU8Oq_am6dDRThyfd3QhhqcxxSUKef55Ys97NwZzTorGIp3ZBrnN8CzL9Xgs/s1600/twt.png);
  opacity: 1;
  width: 69px;
  height: 68px;
  -webkit-transition: all 1.05s ease;
  -moz-transition: all 1.05s ease;
  -o-transition: all 1.05s ease;
  transition: all 1.05s ease;
}
#social .social-sidebar li .tw:hover {
  -webkit-transition: all 0.55s ease;
  -moz-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
  -webkit-transition: all 0.55s ease;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QSP7mymyAW-S3uQEvxer6DsmtrRkM765kV0sZY57dCvdOrcuR9zmsqbI7OP8Gw84gEe-JNqIO1zVQsVG7BPFNPP0jHgKsSR2BJZisLuA0BK1RiZVHkzRc14qzzEhbz-N9CiDefjmjZFE/s1600/tw-hover.png);
}
#social .social-sidebar li .fa {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-FnkvNwgyn6WHobadovrTxaF3o3KkexErIODi5iX1MO_gGdU4-lYSu0AuQPcjMX66G18FWUBcEW8NTfHy_xacvtAIvdA0m7gSCivkSJ3_U4UbYdXQBissyrBvTGTN7wqZyxWDTX6beHRy/s1600/fcb.png);
  opacity: 1;
  width: 69px;
  height: 68px;
  -webkit-transition: all 1.05s ease;
  -moz-transition: all 1.05s ease;
  -o-transition: all 1.05s ease;
  transition: all 1.05s ease;
}
#social .social-sidebar li .fa:hover {
  -webkit-transition: all 0.55s ease;
  -moz-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
  -webkit-transition: all 0.55s ease;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGgonuib7ppXoaDNTZm8C3RGAUMcS9bURHIU84qNKuUlDtlp5NOqJxMiN8XvveIDgiEQjnhx-2Mw0gMX1EO378TBp3f-E_UzFCeOmsUGcLTKEmYrJreMYTDxxtmDgcOun0Z-HaBZ6YI0Q/s1600/fb-hover.png);
}
#social .social-sidebar li .yo {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIemnovSlp-VCMCCeF8sz0aMIxGDlZT1cdRUW2ytnI0ZSDN37J2bc7NdclTZCG0-I_SP6r2xR38MdoIR9k3bSQigDDiLtSYT_wD_CaUoD6IjLH2ScS-VQ9Uw4iODfO5VxrMPohejCZPoRj/s1600/yo.png);
  width: 69px;
  height: 68px;
  margin-top: 4px;
  opacity: 1;
  -webkit-transition: all 1.05s ease;
  -moz-transition: all 1.05s ease;
  -o-transition: all 1.05s ease;
  transition: all 1.05s ease;
}
#social .social-sidebar li .yo:hover {
  -webkit-transition: all 0.55s ease;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6WNjjYWoM5JJFV8b9NQdqyWKD1REUcqBeHbm6RO39lO9K62lQ_LWabkAER464iz2l-7ThFSHNXELpsGnS9IwfRgeCAM6-gTZ30xzPII01rVIQ8Gj2i5AOCSZFXFJfM1ESJGPnGqaOENrw/s1600/yo-hover.png);
}</style>