9 Özel CSS ve JavaScript Sosyal Paylaşım Düğmeleri

Her site, web'deki paylaşımı artırmak için bazı sosyal düğmeler içermelidir. Ancak varsayılan paylaşım düğmeleri o kadar iyi değil ve her biri ağların markasına göre farklı şekilde tasarlanmış.

Bu nedenle, kendi sitenizde biçimlendirip yeniden kullanabileceğiniz bu küçük özel paylaşım düğmeleri koleksiyonunu bir araya getirdik. Güzel paylaşım düğmeleri arıyorsanız, bu şablonlar harika bir başlangıç ​​noktası sunar.

1. Yan Paylaşım

İlki, geliştirici Michael Schofield tarafından oluşturulan en sevdiğim tekniklerden biridir. Bu sabit yan paylaşımlı sosyal rozet kullanıcı arayüzü, büyük bloglarda ve dergi sitelerinde gerçekten yaygındır.

Bu sosyal rozetler, başlığın en üst kısmında yer alabilir veya kullanıcıyla birlikte aşağı kaydırılabilir. Farklılıkları karşılaştıran herhangi bir örnek olay incelemesi bulamadım ama sabit düğmelerin daha yüksek pay sayıları gördüğünü hayal ediyorum. Ve her iki durumda da o kadar iyi tasarlanmışlar ki, düzene spam ya da ayak bağı gibi görünmüyorlar.

Bir blog çalıştırıyorsanız ve bazı özel paylaşım rozetleri istiyorsanız, bu muhtemelen başlamak için en iyi şablondur.

2. Görüntü Düğmeleri

Bir başka popüler paylaşım stili, bir web sitesinde bulunan görüntüleri yeniden yayınlamaktır. Bu, Pinterest'te popülerdir ancak Facebook, Twitter ve hatta Google+ için de iyi çalışabilir.

Bu görüntü düğmeleri, saf CSS3 ve her biri için bazı arka plan logoları kullanan özel tasarımlardır. Henüz herhangi bir sosyal ağa bağlanmazlar, ancak çapa bağlantıları sosyal paylaşım için kolayca programlanabilir.

Tasarım gerçekten burada benim odak noktam çünkü herhangi bir görüntüye eklenmiş olağanüstü görünüyorlar. Ayrıca konum, yalnızca gönderiyi değil, görüntünün kendisinin de paylaşımlarını teşvik etmeye çalıştığınız fikrini gerçekten ele veriyor.

3. Paylaşımları Aç/Kapat

Hepimiz bu WordPress paylaşım widget'larını küçük paylaşım simgesini ve açılır menüyü kullanarak gördük. Bir süre sonra bayatlayabilirler, bu yüzden biraz karıştırmaya yardımcı olur.

Bu snippet ile sosyal paylaşımlarınızı özel bir animasyon ve gizli menü ile yeniden şekillendirebilirsiniz. Birden çok ağda çok sayıda paylaşımı teşvik etmek isteyen bir sitesi olan herkes için mükemmeldir.

Her simge saf CSS ile tasarlanmıştır ve animasyon jQuery ile kontrol edilir. Bunu herhangi bir düzene kopyalayıp yapıştırabilmeli ve çalışmasını sağlamalısınız. Bir makalenin başlığının hemen yanına, hatta insanlar okumayı bitirdikten sonra en alta bile sığar. Her iki durumda da, yönetim kurulu genelinde sosyal paylaşımları artıracağından emin olabilirsiniz.

4. Daire Animasyonları

Biraz eğlenceli animasyon için Stephane Lyver tarafından oluşturulan bu daire düğmelerine göz atın.

Her düğmenin kendi vurgulu animasyon efekti vardır ve hepsi herhangi bir düzene mükemmel şekilde uyum sağlayabilir. Düz beyaz bir arka planda öne çıkmaları için arka planı ve simge renklerini bile değiştirebilirsiniz.

Her şey saf CSS üzerinde çalışır ve simgeler, Bootstrap aracılığıyla Font Awesome'den çekilir.

Bu düğmelerin de doğrudan sosyal paylaşım bağlantılarına bağlanmadığını, ancak bu, doğru kodla kolayca düzeltilebileceğini unutmayın.

5. Basit Paylaşım Düğmeleri

Kısa, tatlı ve öz, bu paylaşım düğmelerini en iyi şekilde tanımlar.

Ionicons simge setinden basit SVG simgeleri kullanırlar. Ancak bunların çalışması için Ionic'e veya herhangi bir JavaScript'e ihtiyacınız yok.

Bunun yerine, doğrudan tarayıcıda paylaşım bağlantılarını açmak için yeni sekme seçenekleriyle birlikte href değerini kullanırlar. JavaScript gerekmez, karmaşık SVG'ler gerekmez.

İyonik simge setini incelerseniz, eklemek isteyebileceğiniz diğer sosyal simgeleri bile bulabilirsiniz. Ayrıca, CSS'deki stiller üzerinde tam kontrole sahipsiniz, böylece boyutu, dolguyu, yazı tipi rengini ve hemen hemen her şeyi değiştirebilirsiniz.

6. Gizli Sosyaller

Geliştirici Chris Sevilleja, bu gizli sosyal düğmeleri tamamen CSS ile yarattı.

Bazı web siteleri, varsayılan paylaşım rozetlerini daha küçük simgelerin içine yerleştirmek için bu tekniği kullanır. Ama kuşkusuz bu benzersiz bir animasyon, yani çok yaygın bir trend değil.

Kodun kurulumu gerçekten kolaydır ve tamamı CSS üzerinden çalışır, böylece tam kontrol sizde olur. Chris, Google+ sosyal rozetleri için benzer bir kalem bile geliştirdi.

Her iki kod parçacığı da hemen hemen her web sitesi için harikadır ve animasyonlar tüm CSS3 uyumlu tarayıcılarda çalışır.

7. Arka Plan Renklerinin Üzerine Gelin

Şimdi, arka plan renginin, hangi düğmeye bastığınıza bağlı olarak değiştiği gerçekten benzersiz bir sosyal paylaşım kurulumu.

Her düğmenin Font Awesome'den alınan kendi özel simgesi vardır, böylece bu seti diğer ilgili simgeleri içerecek şekilde genişletebilirsiniz. Ayrıca, fareyle üzerine gelme değişiklikleri için JavaScript yedeğine sahip olduğu için bu yaklaşımı gerçekten seviyorum.

Ancak web geliştiricisi Christopher Grabinski, tamamen aynı şekilde çalışan (desteklenen tarayıcılarda) saf bir CSS alternatifi yarattı.

Daha küçük sitelerde veya kısa blog gönderilerinde çalışabilmesine rağmen, bu tekniğin daha büyük bir blogda harika görüneceğini düşünmüyorum.

8. Flyout Paylaşımı

Geliştirici Kyle Lavery, Google'ın malzeme geçişlerine yaklaşımını anımsatan harika bir açılır paylaşım düğmesi oluşturdu.

Bu, biraz JavaScript kullanır, ancak yalnızca 5 satırdır ve çok karmaşık değildir. Animasyon büyüsü, ihtiyaçlarınıza göre özelleştirebileceğiniz CSS'dedir.

Ayrıca ilginç olan şey, ham HTML'nin delicesine basit olmasıdır. Bir ana paylaşım kabına sahiptir ve ardından düğmeler için div öğelerini kullanır. Temel olarak 5 satır HTML ve 5 satır JavaScript, bir sürü CSS ile karıştırıldığında size bu güzel etkiyi verir.

Kesinlikle gördüğüm en havalı sosyal paylaşım özelliklerinden biri ve materyal tasarım stili onu daha da havalı kılıyor.

9. 3D Paylaşım Düğmeleri

Koleksiyonumun sonuncusu, sosyal düğmelerin yanı sıra CSS 3D dönüşümlerini kullanan bu 3D tasarım.

Geliştirici Fabrizio Bianchi, bu düğmeleri simgelerden dönüştürme animasyonlarına kadar saf CSS kullanarak oluşturdu. Ana simgeler Font Awesome'dendir ve tek JS kodu düğmeleri içeri gömmek içindir.

Ancak genel olarak bu, herhangi bir sitede iyi çalışması gereken saf bir CSS çözümüdür. 3D efektini herkes sevmez, ancak tasarımınıza uygunsa, bunun için gidin.