sosyal.png-Css3 İle Sosyal Medya İkonlarina Hover Efektleri-cahitsoyman.blogspot.com
Bu makalemizde web sitenizde paylaşım butonları olarak kullanabileceğiniz, sadece Html5 ve Css3 kullanarak animasyonlu olarak hazırlayacağımız sosyal medya  ikonlarının nasıl yapıldığını anlatmaya çalışacağım.

Bu örneğimizde tam daire biçiminde ve gri renkte görünen butonlar; Css3 ün hover geçişlerini kullanacağımdan fare ile üzerine gelindiğinde butonumuz renk değiştirerek, 360 derece dönecek, aynı zamanda sosyal paylaşım butonumuz esas kendi rengine dönecek.

Bir önceki örneğimizde (https://cahitsoyman.blogspot.com/2017/11/dikey-ve-sayfaya-sabit-sosyal-ikon-bari-cubugu.html) icon-moon sosyal butonlarını kullanmıştık. Bu örneğimizde ise, değişiklik olması açısından  font-awesome ikonlarını kullanmak istiyorum.


Font Awesome simgelerini kullanmak için index.html sayfamızda <head> tagları arasına aşağıda ki link satırını eklememiz gerekmektedir. Veyahut da simgeleri bilgisayarımıza indirerek sayfamıza dahil etmemiz gerekmektedir.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/
libs/font-awesome/4.7.0/css/font-awesome.min.css">







Görsel anlatımı aşağıdaki videodan veya youtube sayfasından takip edebilirsiniz.