Sosyal Paylaşım Butonları Örnekleri

Bu örnekte en popüler medya için paylaşım amacıyla dört dikdörtgen düğme gösteriliyor. Orijinal renkler korunmuş ve medya adları ile simgeleri gösteriliyor. Düğmeleri içerik alanına, örneğin bir makaleye yerleştirmek istediğiniz durumlar için özelleştirme iyi bir örnektir.

İşte tüm kullanıcılar için kullanışlı düğmelerin nasıl oluşturulduğu – kayan tasarım sayfayı yukarı ve aşağı kaydırırken onları takip eder ve her zaman elinizin altında olur. Kullanıcılar onları görünümden kaçırmaz. Tasarım minimalist; kare biçimli düğmelerde sadece medya simgeleri bulunur.

Özelleştirme seçeneklerini kullanarak widget’in tamamen benzersiz bir görünümüne ulaşabilirsiniz. Bu düğmeler, sitenin genel stil ve renklerini yansıtacak şekilde tasarlandı. Siyah-beyaz, geometrik ve minimalist bir görünüm elde etmek için yalnızca medya ikonlarını üzerinde bulunduruyorlar – isimler yok.

Bu zarif ve küçük düğmeler sayfada gerçekten temiz ve düzenli görünüyor. Daire biçimli ve materyal stilinde olup seçilen medya simgelerini gösterirler. Üzerine gelindiğinde hoş bir kaydırma animasyonu kullanıcı deneyimine canlılık katar. Düğmeler merkezde hizalanır; isterseniz sol veya sağ varyantları da seçebilirsiniz.

Bu düğmeler daire biçiminde, fakat duyarlı genişlik sayesinde oval ve daha belirgin hâle getirildi. Kullanıcı Düz Stil varyantını seçti ve orijinal medya renklerini bıraktı, ancak siyah renk ekledi ve fareyle üzerine gelindiğinde zıplama animasyonu ekledi.

Dikdörtgen biçimli simgeler güzelce bir ızgara halinde düzenlenmiş ve hem simgeleri hem de medya adlarını içeren metinleri gösterir. İçerik alanına, bazı makalelerin sonundaki bölüm veya sayfanın alt kısmına rahatça sığar. Simgelerde çekici bir kaydırıcı animasyon etkin ve üzerine gelindiğinde simgeler siyaha döner.

Yazar, düğme etiketlerini güncelledi ve her biri için bir eylem çağrısı ekledi. Medya için simge yok – bunun yerine adları eklenmiş. Düğmelerin arka planı beyaza dönüştürüldü ve metin rengi, medya için orijinal olan renk ile görsel uyum kuracak şekilde ayarlandı.

İçeriği kullanıcıların kolay paylaşmasını sağlamak için bu örnekte en popüler mesajlaşma uygulamaları için düğmeler bulunuyor. Düğmeler orijinal renklerini korur ve adıyla birlikte simgeyi gösterir. Yuvarlak biçimdedirler ve Otomatik genişlik sayesinde sayfanın tam olarak doğru alanını doldururlar.