21 HTML5 ve Bootstrap Sosyal Düğme Şablonları 2021
Yayınlanan: 2021-07-22Bu en iyi (ve en havalı) sosyal düğme şablonlarını ücretsiz kullanarak sosyal ağların potansiyelini ortaya çıkarın.
Web'deki mevcut düğme ve simgelerin yığınlarını inceledik ancak bu 21'e karar verdik.
Bu koleksiyonun çeşitliliği nedeniyle doğru stili kolayca bulabilirsiniz .
Burada bitmiyor.
İsterseniz işletmenize ve web sitenize göre de güzelleştirebilir ve markalaştırabilirsiniz.
Sosyal paylaşımın etkisi çok olumlu sonuçlar getirebilir. Facebook, Instagram ve diğerlerinde çok popüler olmayabilecek nişlerde bile kendimiz gördük.
İstediğiniz HER ŞEYİ paylaşmak için bu Bootstrap sosyal düğmelerini kullanabilirsiniz.
Sosyalleşin!
En İyi Sosyal Düğmeler Şablonları
Önyükleme Düğmeleri V15
Sizin için tonlarca farklı düğme varyasyonumuz var, ancak yalnızca size en çok fayda sağlayacak olanları dahil etmeye karar verdik. Ayrıca, kitlerin yalnızca sosyal medya düğmelerini değil, birden fazla düğme içerdiğini fark edeceksiniz.
Büyük zaman KAZANDINIZ.
Bootstrap Buttons V15, muhtemelen listedeki en sevdiğim set. Sosyal düğmeler, üzerine gelindiğinde kaybolan harika bir gölge efektiyle iki farklı biçimde gelir.
Önyükleme Düğmeleri V18
Bootstrap Buttons V18, diğerlerinden çok FARKLI olan farklı düğmelerin bir koleksiyonudur. Yine de, daha geleneksel olanları da elde edersiniz, böylece istediğiniz yolu seçebilirsiniz.
İlk bakışta fark etmeseniz bile, her düğme aynı zamanda serin bir tıklama efekti oluşturan (kaybolarak) bir gölge içerir.
Canlı demo önizleme sayfasını ziyaret ederek kendiniz deneyebilirsiniz.
Önyükleme Düğmeleri V13
Bootstrap Buttons V13 koyu bir arka plan üzerinde olsa da, onu diğer arka plan stilleriyle de kullanabilirsiniz. Her zaman varsayılan yapılandırmaları izlemeniz gerekmez.
Tahıl karşı gitmek için ÜCRETSİZ hissedin.
Burada birkaç farklı sosyal medya düğmesi stili elde edersiniz, böylece size en uygun tasarımı mutlaka bulacaksınız. Yarısı düz bir renkle ve yarısı sadece bir anahatla gelir.
Önyükleme Düğmeleri V01
Herhangi bir web sitesine veya bloga hızla entegre edebileceğiniz basit ve çok yönlü HTML sosyal düğmeleri paketi. Her sosyal platformun markasını takip ederler, bu yüzden onları olduğu gibi kullanabilirsiniz.
Düz bir renk yapısına sahip varyasyonun yanı sıra, sadece bir dış hatlara sahip olanlar da vardır.
Ayrıca, her iki sürüm de gölgeyi kaldırarak çalışan bir CLICK efektiyle birlikte gelir.
Colorlib'den Fantezi Düz Sosyal Düğme Animasyonu
Colorlib, Fancy Flat Animated sosyal simge seti ile harika CSS3 animasyonlarını bir sonraki seviyeye taşıyor. Burada önde gelen LinkedIn, Twitter, Instagram, Youtube, Github ve Facebook sosyal ağ simgeleri yerleşik basit kare arka planlara sahibiz.
Kullanabileceğiniz Font Awesome kitaplığı sayesinde başka birçok simge de mevcuttur.
Simgelerin her birinin üzerine gelindiğinde/tıklandığında, simgeleri varsayılan kare yerine bir daireye dönüştüren ve kendi içinde zaten dinamik ve etkileşimli bir web sitesine gerçekten harika bir ek olabilecek belirli bir ANİMASYON tetiklenir.
Sass ile canlandırılan sosyal düğmeler
Örneğin, ne zaman biri simgelerden birinin üzerine gelse, anında bu simgenin ne hakkında olduğunu söyleyen bir bildirim araç ipucu alacak, Kendi fikirlerinizi ve mesajlarınızı yansıtacak şekilde TAMAMEN özelleştirebilir veya sosyal ağı belirterek varsayılan olarak bırakabilirsiniz. .
Simgeler, Font Awesome'e dayalı olduklarından GitHub, E-posta, Facebook, LinkedIn Twitter, Instagram, Youtube ve diğer tüm sosyal ağlar için de mevcuttur.
Ayrıca, varsayılan renk düzeni, beyaz simge metni ile gri arka plandır.
Bootstrap Tarafından Desteklenen Yazı Tipi Müthiş Sosyal Düğmeler
Bu ikisinin bir bebeği olsaydı, karşılığında alacağınız şey Stan Williams'tan başkası olmayan bu harika ikon setidir. Bu simgeler GitHub, Apple, Android, Skype ve Stack Overflow'a ve yüzlerce simgeden oluşan Font Awesome kitaplığının tamamına kadar uzanacak.
Sosyal ihtiyaçlarınız için renk ve KESİN ifadelere ihtiyacınız varsa, edinmeniz gereken set budur.
Colorlib'den Minimal CSS/HTML Sosyal Düğmeleri
İşte Colorlib'den bazı düzgün sosyal simgeler. Bu sette Facebook, Twitter, Instagram, Youtube, Behance ve daha yüzlercesi için gri renkli bir simge seti bulunur.
Colorlib, simgelerin daha kompakt görünmesini ve tasarımlara entegre edilmesinin çok daha kolay olmasını sağlayan, çıkarılması kolay bir kenarlık ekledi.
Ancak, her zaman kenarlığı ortadan kaldırabilir ve simgeleri İSTEDİĞİNİZ GİBİ kullanabilirsiniz. Örneğin, alt bilgi veya başlık gezinme menülerinde veya doğrudan içerik alanlarınızda.
Kayan Hover ile Sosyal Düğmeler
Web'in gelişimini ve özellikle CSS3 ve HTML5 gibi dillerin tasarım özelliklerini görmek harika. İşte Colorlib'den gelen güzel ve modern bir simge seti.
Bu set, dört ana sosyal ağı (LinkedIn, Twitter ve Facebook) güzel bir renk düzenlemesinde ve simgeleri içinde tutmak için kutulu yerleşim durumunda sunuyor.
Fareyle üzerine gelme efekti, varsayılan sosyal ağ paylaşım widget'larını daha çekici sosyal simgelerle maskelemenize yardımcı olmak için oluşturulmuştur.
Simgelerin SÜRÜMÜNÜZÜN üzerine geldiğinde, kullanıcı gerçek paylaşım sayılarıyla doğrudan Beğen, Paylaş ve Tweetle düğmelerini görebilecektir!
Sosyal Düğmeleri Paylaşın
Colorlib, çok temiz bir özellik sağlamak için HTML5 kullanan çok hafif bir sosyal paylaşım düğmesi seti bizimle paylaşıyor.
Temel olarak sitenize eklemek için basit bir 'paylaşım simgesi' widget'ı elde edersiniz, ancak widget'ı tıkladığınızda, içerik paylaşmak veya kendi sosyal medya profillerinizi tanıtmak için kullanılabilecek bir dizi sosyal ağ sitesi GENİŞLEŞİR.
Her zamanki Colorlib tarzında bu simgeler, 100'lerce simgeyle birlikte tam Font Awesome kitaplığıyla birlikte gelir.
Şık Sosyal Düğmeler
Chris Deacy bize, simgeler ve kullanıcı arasında MAKSİMUM etkileşim için vurgulu arka plan efektleri sağlayacak bir dizi şık sosyal simge getiriyor.
Her sosyal simge seti, bir dizi sosyal ağa özgü simge sağlar ve bu simgede Twitter, Facebook, Skype ve Dribble'ı buluyoruz.
Simgelerden birinin üzerine her geldiğinizde, simgenin arka planı, sosyal ağların her birinin en baskın rengiyle dolar.
Gözden kaçmayacak oldukça havalı bir özellik!
Yalnızca HTML kullanan Sosyal Düğmeler
OstrIO'dan yalnızca HTML içeren bir sosyal simge seti, minimalist web siteleri için hafif bir sosyal medya paylaşım çözümüne ihtiyaç duyan web yöneticileri, tasarımcılar ve geliştiriciler için mükemmel bir çözümdür.
Ayrıca, bu simgelerin herhangi bir ölçekli projeye FAYDALANACAĞI konusunda hemfikiriz, bu nedenle kendinizi yalnızca HTML konseptiyle sınırlamayın.
Ayrıca, bu setin dört farklı boyut seti de vardır, bu da her boyutta ve biçimde web sitelerine entegre edilmesini son derece kolay hale getirir.
Sosyal medya simgelerinin mevcudiyeti Pinterest'ten VKontakte'ye, Facebook ve Twitter'a ve DİĞERLERİ'ne kadar uzanmaktadır.
Sosyal Düğmelerin Üzerine Gelin
Web sitenizdeki harika sosyal medya simgeleriyle bir şeyler renklendirmek istiyorsanız, bunlar kesinlikle işinizi görecektir. Şık bir vurgulu efektle , ilk bakışta oldukça basit görünebilirler, ancak fare imleciniz onlara çarptığında çok fazla değil.
Facebook, Pinterest, LinkedIn, YouTube Behance, adını siz koyun, bu koleksiyonun size sunduğu pek çok çözüm var.
Hemen hemen her düğmenin üzerinde FARKLI bir vurgulama efekti vardır, bu yüzden devam edin, önizlemeye gidin ve bunları kendiniz kontrol edin. İşleri basit ve yaratıcı tutmak istiyorsanız bundan keyif alacaksınız.
Hareketli Sosyal Medya Düğmeleri
Bu sosyal medya düğmelerinin yalnızca düzgün bir animasyonu değil , aynı zamanda harika bir degrade efekti de vardır. Web sitenize veya blogunuza girdikten sonra, tüm ziyaretçileriniz onları hiç şüphesiz fark edeceklerdir.
Ve bir kez üzerlerine uçtuklarında, heyecan tavan yapacak.
Niye ya? Çünkü sana bir şey söylüyorum - bunu beklemiyorlardı!
Çevrimiçi varlığınızın düzenli ve düzenli olmasını isteseniz de, sosyal medya simgeleri gibi küçük ayrıntılarla her zaman ZENGİNLEŞTİRebilirsiniz.
Sayfanızı herhangi bir drama ile fazla karıştırmazlar, bunun yerine deneyimi artırırlar.
Hareketli Sosyal Simgeler
Daha hareketli sosyal medya simgeleri yolunuza çıkıyor. Bu özel koleksiyon, Facebook veya Twitter, Pinterest veya YouTube olsun, tüm simgeler için aynı etkiyi yaratıyor.
Fare imlecini üzerlerine getirdiğinizde dolaşırlar . Biraz daha TEMEL bir şey için bu şablon kesinlikle işinizi görecektir.
Web sitenizin, blogunuzun veya çevrimiçi mağazanızın sıkıcı ve sıkıcı olmayan sosyal medya simgelerine sahip olmasına izin verin.
Bunlar size bir kuruşa bile mal olmaz, bu yüzden onları elinize alın ve ne kadar iyi süslediklerini görmek için sayfanızdaki şeyleri test edin. Harika sonuçlar için küçük iş.
CSS sosyal düğmeleri ve simgeleri
İtiraf ediyoruz, listemizdeki simge setlerinin çoğu zaten gerçekten çok etkileyici ve milyonlarca web kullanıcısına harika bir sosyal paylaşım deneyimi sağlayacak.
Bu devasa CSS3 sosyal düğmeleri ve simgeleri seti, sosyal medya bilgilerinizi web sitelerinizde, uygulamalarınızda, projelerinizde, bloglarınızda ve benzerlerinde görüntüleme biçiminizde devrim yaratacak .
Basit Evernote düğmelerinden “Smashing Magazine'de Daha Fazla Oku” veya “App Store'da Mevcut” ve benzeri gibi daha fazla TEKNİK düğmelere kadar.
Bu tür simgeler, içeriğinize gerçekten karakter katacaktır. Bu aynı zamanda sosyal paylaşımlara ulaşma şansınızı ve görünüşe göre satışları artıracaktır .
Dairesel Sosyal Düğmeler
Mevcut sosyal simge seti pazarında kare simgeler kesinlikle çok baskın.
Shahnur Alam, en popüler sosyal ağlar için çok sayıda yuvarlak sosyal simge sağlayarak (kendini inşa ederek) bunu değiştirmeye yardımcı olmak istiyor.
Bu özel seti MINIMALISTIC yazar sitelerinde, kişisel dergilerde ve benzerlerinde görebiliriz.
Simge Yazı Tipleri ile Sosyal Düğmeler
David Pottrell uzun süredir bir şeyler geliştiriyor ve paylaşıyor. Yerleşik simge yazı tipleriyle ayarlanan sosyal düğmeleri, böyle bir simge seti konseptinin en sorunsuz uygulamalarından biridir.
David'in vizyonu, uygun renk şemaları ile sosyal ikon çözümleri sağlamaktır. Her şeyden önce, her bir öğenin yanına bir marka simgesi yazı tipi ekler. Bu EYLEM, simgelerin her birinin gerçekliği için anlaşmayı imzalar.
David'in dikkatimize sunduğu HTML5 ve CSS3 becerilerine hayran kalıyoruz.
CSS3 geçişli FLAT Beauty Sosyal Düğmesi
FLAT tasarımı, buradaki toplamamızda tutarlı olmadı. Ancak, SMTashrik Anam'ın gerçekten muhteşem ve güzel çalışmalarını tanıtarak bunu düzeltmeye çalışacağız.
Dinamik ve etkileşimli bir sosyal paylaşım deneyimini güçlendirmek için CSS3 GEÇİŞ ETKİLERİNİ kullanan simgeler sağlamak istiyor.
Simgelerin her birinin üzerine gelin ve kendi seçtiğiniz metni ortaya çıkarmak için nasıl açıldıklarını izleyin.
Basit CSS Sosyal Düğmeleri
Bazıları bu özel seti modern ve biraz karmaşık olarak adlandırsa da, Simple asla hayal kırıklığına uğratmaz. Bunun şimdiye kadarki listemizdeki en basit sosyal setlerden biri olduğuna gerçekten inanıyoruz.
Bu, özellikle profillerimizi tanıtmak istediğimiz durumlarda işe yarayacaktır. İçerik sayfalarımızdaki doğrudan sosyal paylaşım düğmeleri yerine bu şablonu kullanabilirsiniz. Bu paket Forrst, Dribbble, Flickr, Designmoo ve diğerlerini destekler.
Son kararı vermeden önce kontrol etmek için biraz zaman ayırın ve belki de kendi sitenizde TEST edin.
Sosyal Düğmelerin Üzerinden Dönün
Roll Over simgeleri, Soundcloud, Pinterest, Facebook, YouTube ve Twitter simgelerinin özelliklerini belirler.
Bu simgeler, üzerine gelinen bir metin eklemenizi sağlar. Bu metinler, bir ziyaretçi bu setteki simgelerden birinin üzerine geldiğinde görünür.
Bu, Hugo Darby-Brown tarafından yapılmıştır. Bu şablonu oluşturmak ve böylesine KEYİFLİ bir paylaşım deneyimi sağlamak için saf CSS3 teknolojisini kullandı.
Yukarıda listelenen ve HTML/CSS tabanlı sosyal simgeler. Adobe Photoshop, Illustrator veya başka bir şekilde kullanabileceklerinizi arıyorsanız, bu simge koleksiyonunu kontrol etmek isteyebilirsiniz.