اربع تواصل متحركه مربعه

 الاضافه لـ HTML/JavaScript

اختر المكان المناسب وهذا مثال

<div class="abt-social-slide">

 <ul>

 <li><a class="facebook" href="#" target="_blank">Facebook</a></li>

 <li><a class="twitter" href="#" target="_blank">Twitter</a></li>

 <li><a class="google-p" href="#" target="_blank">Google plus</a></li>

 <li><a class="rss" href="#" target="_blank">Rss</a></li>

 </ul>

 </div>

 <style>

 .abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}

 .abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}

 .abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg420_OLMiZPmfDlQexzbsXuaPsjfS875YRKXWsK-Es9r4ubeGXjWmhSkk8TP7yoCWo2C2DkFkEz48mjBxVjj2oG2wHV1kAQbPy0HSv6LJS2djIMXXp2coqqoKyCCVvBF76Xybp5MgmYA/s1600/facebook.png) no-repeat 0 -88px}

 .abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg420_OLMiZPmfDlQexzbsXuaPsjfS875YRKXWsK-Es9r4ubeGXjWmhSkk8TP7yoCWo2C2DkFkEz48mjBxVjj2oG2wHV1kAQbPy0HSv6LJS2djIMXXp2coqqoKyCCVvBF76Xybp5MgmYA/s1600/facebook.png) no-repeat 0 0}

 .abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKlRyf1K-J9u6BX2XfTFTONqm-IbOTkZMVebWAuqJBaTahIF6zf55gvMzg8nSYQvA8jn2TU_hf94aT96m5tKBrQ0lwIr8Wq-IP5m0C-wKNbYHXZOSQHGJ712AUa2ELJT_8xH_HoJzdQ/s1600/twitter-1.png) no-repeat 0 -88px}

 .abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKlRyf1K-J9u6BX2XfTFTONqm-IbOTkZMVebWAuqJBaTahIF6zf55gvMzg8nSYQvA8jn2TU_hf94aT96m5tKBrQ0lwIr8Wq-IP5m0C-wKNbYHXZOSQHGJ712AUa2ELJT_8xH_HoJzdQ/s1600/twitter-1.png) no-repeat 0 0}

 .abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj83uaRj60LAchgZswOTFTHa0gRQAdYeEldKFAdOADMhIYXRlU747V-DXKTw5th3zF38u6ROtnfol8X8bY29XM1AbaVuC8_79jmLzDU-I9cPw1y1_rHYqexkYkjStbIcxCedL73P-tjNA/s1600/google.png) no-repeat 0 -88px}

 .abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj83uaRj60LAchgZswOTFTHa0gRQAdYeEldKFAdOADMhIYXRlU747V-DXKTw5th3zF38u6ROtnfol8X8bY29XM1AbaVuC8_79jmLzDU-I9cPw1y1_rHYqexkYkjStbIcxCedL73P-tjNA/s1600/google.png) no-repeat 0 0}

 .abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7n9DyKOIaTQe1Y7cPfj17gBT8qqIjgl-Bg-OzPOp-4aR0Xyap1Nys4LvhjbHMRXWugmifqX-nLMkVk0_QaBwPIzHMK6NwplHS4BcZfVYTdnfqlDmLe3LfESkIP-eF3MPiYnFyX7-sPg/s1600/twitter.png) no-repeat 0 -88px}

 .abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7n9DyKOIaTQe1Y7cPfj17gBT8qqIjgl-Bg-OzPOp-4aR0Xyap1Nys4LvhjbHMRXWugmifqX-nLMkVk0_QaBwPIzHMK6NwplHS4BcZfVYTdnfqlDmLe3LfESkIP-eF3MPiYnFyX7-sPg/s1600/twitter.png) no-repeat 0 0}

</style> 

وسلامتكم