20 HTML5 ve Bootstrap Sosyal Medya Düğmeleri 2022
Yayınlanan: 2022-07-15Bu en iyi (ve en havalı) sosyal düğme şablonlarını ücretsiz kullanarak sosyal ağların potansiyelini ortaya çıkarın.
Web'deki birçok düğmeyi ve simgeyi inceledik ancak bu 21'e karar verdik.
Bu koleksiyonun çeşitliliği sayesinde 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 vb.'de çok popüler olmayan nişlerde bile kendimiz gördük.
İstediğiniz HER ŞEYİ paylaşmak için bu Bootstrap sosyal düğmelerini kullanabilirsiniz.
Sosyalleşin!
Önyükleme Düğmeleri V15
Sizin için tonlarca farklı düğme varyasyonumuz var, ancak yalnızca size en çok fayda sağlayacakları 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 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, diğer arka plan stilleriyle 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 TIKLAMA 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. Basit kare arka planlarda yerleşik önde gelen LinkedIn, Twitter, Instagram, Youtube, Github ve Facebook sosyal ağ simgelerine 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 belirli bir ANİMASYON tetiklenir. Bu, zaten dinamik ve etkileşimli bir web sitesine harika bir ek olabilir.
Sass ile canlandırılan sosyal düğmeler
Sırada, Colorlib'den her simge için belirli araç ipuçlarını içeren SASS animasyonlu bir sosyal simge seti var.
Örneğin, biri simgelerden birinin üzerine geldiğinde anında bu simgenin ne hakkında olduğunu söyleyen bir bildirim araç ipucu alır, Fikirlerinizi ve mesajlarınızı yansıtmak için TAMAMEN özelleştirebilir veya sosyal ağı belirterek varsayılan olarak bırakabilirsiniz.
Simgeler GitHub, E-posta, Facebook, LinkedIn, Twitter, Instagram, Youtube ve Font Awesome'e dayalı diğer 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
Son olarak, web'de çok popüler iki çerçevenin bir kombinasyonuna sahibiz - Bootstrap ve Font Awesome.
Bu ikisinin bir bebeği olsaydı, Stan Williams'tan başka hiç kimseden bu harika simge setini ne alacağınızı hayal edin. 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.
Bu, sosyal ihtiyaçlarınız için renk ve KESİN ifadelere ihtiyacınız varsa edinmeniz gereken settir.
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 beğendiğiniz simgeleri kullanabilirsiniz. Örneğin, alt bilgi veya başlık gezinme menülerinde veya 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 büyük 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 paylaşıyor.
Sitenize eklemek için basit bir 'paylaşım simgesi' widget'ı alırsınız, ancak widget'ı tıkladığınızda, birçok sosyal ağ sitesi GENİŞLETMEK, içerik paylaşmak veya kendi sosyal medya profillerinizi tanıtmak için kullanılabilir.
Her zamanki Colorlib tarzında, bu simgeler, 100'lü simgelerin tümü ile eksiksiz bir 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, sosyal ağa özgü birçok 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çekte 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 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.
Hareketli Sosyal Medya Düğmeleri
Bu sosyal medya düğmelerinin düzgün bir animasyonu var, ancak aynı zamanda harika bir degrade efektiyle geliyorlar. Web sitenize veya blogunuza girdikten sonra, tüm ziyaretçileriniz onları şüphesiz fark edecektir.
Ve bir kez üzerlerine uçtuklarında, heyecan tavan yapacak.
Neden? Niye? Çünkü sana bir şey söylüyorum - bunu beklemiyorlardı!
Çevrimiçi varlığınızın 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, aksine deneyimi artırırlar.
Hareketli Sosyal Simgeler
Daha fazla hareketli sosyal medya ikonu yolunuza çıkıyor. Bu özel koleksiyon, Facebook veya Twitter, Pinterest veya YouTube gibi tüm simgeler için aynı etkiyi yaratıyor.
Fare imlecini üzerlerine getirdiğinizde dolaşırlar . Bu şablon, biraz daha TEMEL bir şey için hile yapacak.
Web sitenizin, blogunuzun veya çevrimiçi mağazanızın 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 karakter katacaktır. Bu aynı zamanda sosyal paylaşımlara ve satışlara ulaşma şansınızı da artıracaktır.
Dairesel Sosyal Düğmeler
Mevcut sosyal simge seti pazarında kare simgeler ç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 set, MINIMALISTIC yazar sitelerinde, kişisel dergilerde ve benzerlerinde görünür.
Simge Yazı Tipleri ile Sosyal Düğmeler
David Pottrell uzun süredir bir şeyler geliştiriyor ve paylaşıyor. Yerleşik simge yazı tipleriyle ayarlanmış sosyal düğmeleri, böyle bir simge seti konseptinin en sorunsuz uygulamaları arasındadır.
David'in vizyonu, uygun renk şemaları ile sosyal ikon çözümleri sağlamaktır. Her şeyden önce, her öğ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 hayranlık duyuyoruz.
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 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.
İçerik sayfalarımızdaki doğrudan sosyal paylaşım düğmeleri yerine bu şablonu kullanabilirsiniz. Bu, özellikle profillerimizi tanıtmak istediğimiz durumlarda işe yarayacaktır. Bu paket Forrst, Dribbble, Flickr, Designmoo ve diğerlerini destekler.
Kontrol etmek için biraz zaman ayırın ve nihai kararı vermeden önce sitenizde TEST EDİN.
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.
Bunu Hugo Darby-Brown yaptı. Bu şablonu oluşturmak ve kusursuz 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.
Gönderiyi beğendiyseniz bize bildirin.