Html ve Css ile Sosyal Medya Butonları Yapımı

Bu yazımda, Html ve Css kullanarak 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 plugin bulunuyor. Bunları kullanmak yerine kendiniz hızlıca kodlayıp tasarımlarınıza yerleştirebilirsiniz. Yapımı gerçekten oldukça basit. Temel düzeyde Html ve Css bilginiz varsa hiç zorlanmayacaksınızdır.

 Önemli :  Sosyal medya ikonları için Font Awesome Versiyon 5.3.1’i kullanıyorum. Sizde örnekleri kendi bilgisayarınızda uygularken Html sayfanızın <head> </head> etiketleri arasına aşağıdaki CDN linkini eklemeyi unutmayın. Font Awesome hakkında daha fazla bilgi edinmek için tıklayınız.  

Aşağıda isimlerini listelediğim tam 19 farklı sosyal medya butonunu yapacağız. Siz hangilerini kullanmak istiyorsanız onlara ait kodları alıp kullanabilirsiniz.

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

Artık kodlarımıza geçebiliriz.

Html kodları

Css kodları

Görünümü

css-sosyal-medya-butonlari

KÖŞELERİ YUVARLATILMIŞ SOSYAL MEDYA BUTONLARI

Html kodları

Css kodları

Görünümü

sosyal-medya-html-kodu

Html kodları

Css kodları

Görünümü

sosyal-medya-butonlari-html

YAZI VE İKON BİRLİKTE KULLANILAN SOSYAL MEDYA BUTONLARI

Html kodları

Css kodları

Görünümü

html-sosyal-medya-butonlari

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılarda ilginizi çekebilir.

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

Css ile Toggle Switch Yapımı  

Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)

Css ile Yatay Açılır Menü Yapımı

Html ve Css ile Animasyonlu Arama Kutusu Yapımı

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

2 Yorum

  1. blank Ali Şubat 12, 2021 Cevapla
    • blank admin Şubat 14, 2021

Yorum Yazın