Html ve Css ile Sabit/Yapışkan Sosyal Medya Butonları Yapımı

Bu yazımda, Html ve Css kullanarak sabit/yapışkan sosyal medya butonlarının nasıl yapıldığını öğreneceğiz. Her geçen gün sosyal medya kullanıcılarının artmasıyla birlikte web sitelerinde bulunan sosyal medya butonları da artık olmazsa olmazlarımız arasındaki yerini aldı.

Sosyal medya butonlarının, sitenizin ziyaretçi sayısını ve ziyaretçinin sitenizdeki etkileşimini arttırmada ne kadar etkili bir araç olduğu tartışılmaz bir gerçek. 

Sosyal medya butonları ile ilgili birçok hazır eklenti bulunuyor. Bunları kullanmak yerine kendiniz hızlıca kodlayıp tasarımlarınıza yerleştirebilirsiniz.

Fontawesome’ın son sürümünü CDN olarak kullanabilmek için sitesinden kayıt olup sonrasında gerekli CDN kodunu alabiliyoruz.

Siz de kayıt olup sizin için oluşturulan CDN kodunu sayfanıza eklemelisiniz. 

Örneğimizin son hali aşağıdaki gibi olacak.

html-ve-css-ile-sabit-sosyal-medya-butonlari-yapimi

Örneğimizde 6 farklı sosyal medya ikonunu kullandım. Eğer farklı sosyal medya butonları da oluşturmak isterseniz, oluşturmak istediğiniz ikonların kodlarını ve renklerini kullanmalısınız. Tasarımlarınız için aşağıdaki sosyal medya ikonlarını kullanabilirsiniz.

  • facebook
  • twitter
  • google
  • linkedin
  • youtube
  • instagram
  • pinterest
  • snapchat
  • skype
  • android
  • dribbble
  • vimeo
  • tumblr
  • vine
  • foursquare
  • stumbleupon
  • flickr
  • yahoo
  • reddit

Artık kodlarımızı yazmaya başlayabiliriz.

Html kodları

Css kodları

Umarım “Html ve Css ile Sabit/Yapışkan Sosyal Medya Butonları Yapımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

Css ile Toggle Switch Yapımı

Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.