21 Șabloane de butoane sociale HTML5 și Bootstrap 2021
Publicat: 2021-07-22Deblocați potențialul rețelelor sociale utilizând aceste șabloane de butoane sociale cele mai bune (și mai tari) - gratuit.
Am analizat o grămadă de butoane și icoane disponibile pe web, dar am stabilit cu aceste 21.
Puteți găsi cu ușurință stilul potrivit datorită cât de diversă este această colecție.
Nu se termină aici.
Dacă doriți, le puteți înfrumuseța și marca în funcție de afacerea dvs. și site-ul web.
Efectul partajării sociale poate aduce rezultate foarte pozitive . Am văzut-o noi înșine chiar și în nișe care ar putea să nu fie prea populare pe Facebook, Instagram și altele.
Puteți utiliza aceste butoane sociale Bootstrap pentru a partaja TOT ce doriți.
Fii sociabil!
Cele mai bune șabloane de butoane sociale
Butoane Bootstrap V15
Avem o mulțime de variante de butoane diferite pentru dvs., dar am decis să le includem doar pe cele care vă vor beneficia cel mai mult. De asemenea, veți observa că kiturile includ mai multe butoane și nu doar cele de social media.
CÂȘTIGI la mare distanță.
Bootstrap Buttons V15 este probabil setul meu preferat din listă. Butoanele de socializare vin în două formate diferite, cu un efect de umbră rece, care dispare la plimbare.
Butoane Bootstrap V18
Bootstrap Buttons V18 este o colecție de butoane diferite, care sunt foarte DISTINCT de celelalte. Totuși, aveți și unele mai tradiționale, astfel încât să puteți alege oricare cale doriți.
Chiar dacă nu îl observați la prima vizualizare, fiecare buton include și o umbră care creează un efect de clic rece (prin dispariție).
O puteți încerca singur vizitând pagina de previzualizare a demonstrației live.
Butoane Bootstrap V13
Chiar dacă butoanele Bootstrap V13 sunt pe un fundal întunecat , îl puteți utiliza și cu alte stiluri de fundaluri. Nu trebuie întotdeauna să urmați configurațiile implicite.
Simțiți-vă LIBER să mergeți contracurent.
Aici veți obține mai multe stiluri diferite de butoane pentru rețelele sociale, așa că veți găsi cu siguranță designul care vi se potrivește cel mai bine . Jumătate vin cu o culoare solidă și jumătate doar cu un contur.
Butoane Bootstrap V01
Un pachet de butoane sociale HTML simple și versatile pe care le puteți integra rapid în orice site sau blog. Ele urmăresc marca fiecărei platforme sociale, așa că sunteți binevenit să le angajați așa cum este.
Împreună cu variația cu o structură de culoare solidă, există și cele cu doar un contur.
Mai mult, ambele versiuni vin cu un efect CLICK care funcționează prin eliminarea umbrei.
Animație Fancy Flat Social Button de Colorlib
Colorlib duce animațiile CSS3 la nivelul următor cu setul său de pictograme sociale Fancy Flat Animated. Aici avem cele mai importante pictograme de rețele sociale LinkedIn, Twitter, Instagram, Youtube, Github și Facebook încorporate în fundaluri pătrate simple .
Multe alte icoane sunt, de asemenea, disponibile datorită bibliotecii Font Awesome, care este la dispoziția dumneavoastră.
Când plasați / faceți clic pe fiecare dintre pictograme, se declanșează o ANIMARE specifică care transformă pictogramele într-un cerc, mai degrabă decât în pătratul implicit, și care, în sine, poate fi un plus extraordinar la un site web deja dinamic și interactiv.
Butoane sociale animate cu Sass
De exemplu, ori de câte ori cineva va trece deasupra uneia dintre pictograme, va primi instantaneu un sfat de instrucțiuni de notificare care spune despre ce este vorba despre această pictogramă, îl puteți personaliza complet pentru a reflecta propriile idei și mesaje sau pur și simplu să le lăsați ca implicite specificând rețeaua socială .
Pictogramele sunt, de asemenea, disponibile pentru GitHub, e-mail, Facebook, LinkedIn Twitter, Instagram, Youtube și orice alte rețele sociale, deoarece se bazează pe Font Awesome .
În plus, schema de culori implicită este fundalul gri, cu text alb pe pictogramă.
Font Awesome Social Buttons Powered by Bootstrap
Imaginați-vă dacă cei doi ar avea un copil, ceea ce ați obține în schimb este acest minunat set de icoane de la nimeni altul decât Stan Williams. Aceste pictograme se vor întinde până la GitHub, Apple, Android, Skype și Stack Overflow și la întreaga bibliotecă Font Awesome cu sute de pictograme.
Dacă aveți nevoie de declarații de culoare și STRICT pentru nevoile dvs. sociale, acesta este setul de achiziționat.
Butoane sociale CSS / HTML minime de Colorlib
Iată câteva pictograme sociale îngrijite de la Colorlib. Acest set are o set de pictograme de culoare gri pentru Facebook, Twitter, Instagram, Youtube, Behance și alte sute.
Colorlib a adăugat o margine ușor de îndepărtat, care face ca icoanele să pară mai compacte și să fie mult mai ușor de integrat în design.
Cu toate acestea, puteți oricând elimina chenarul și puteți utiliza pictogramele așa cum vă place. De exemplu, în meniul de navigare al subsolului sau antetului sau direct în zonele dvs. de conținut.
Butoane sociale cu glisare
Este atât de grozav să vezi evoluția web și, în special, aspectele de proiectare ale limbajelor, cum ar fi CSS3 și HTML5. Iată un set de pictograme frumos și modern care vine de la Colorlib.
Acest set prezintă cele patru rețele sociale majore (LinkedIn, Twitter și Facebook) într-un frumos aranjament de culori și carcasă de aspect în cutie pentru a ține icoanele înăuntru.
Efectul hover este creat pentru a vă ajuta să mascați widgeturile implicite de partajare a rețelei sociale cu pictograme sociale mai atrăgătoare.
La trecerea peste VERSIUNEA Dvs. a pictogramelor, utilizatorul va putea vedea butoane directe Like, Share și Tweet cu număr real de share!
Distribuiți butoane sociale
Colorlib împărtășește cu noi un set de butoane de partajare socială foarte ușor, care folosește HTML5 pentru a oferi o caracteristică foarte îngrijită.
Practic, veți obține un widget simplu de „pictogramă de partajare” pe care să îl adăugați pe site-ul dvs., dar făcând clic pe widget o serie de site-uri de rețele sociale se extinde, care pot fi utilizate pentru partajarea conținutului sau pentru promovarea propriilor profiluri de social media.
În mod obișnuit, Colorlib, aceste icoane vin cu o bibliotecă completă Font Awesome, cu toate cele 100 de icoane.
Butoane sociale elegante
Chris Deacy ne aduce un set de pictograme sociale elegante, care vor oferi efecte de fundal pentru interactivitatea MAXIMĂ între pictograme și utilizator.
Fiecare set de pictograme sociale oferă o serie de pictograme specifice rețelei sociale, iar în aceasta, găsim Twitter, Facebook, Skype și Dribble.
De fiecare dată când treceți cu mouse-ul peste una dintre pictograme, fundalul pictogramei se umple cu cea mai dominantă culoare a fiecăreia dintre rețelele sociale.
O caracteristică destul de cool, care nu va trece neobservată !
Butoane sociale folosind numai HTML
Un set de pictograme sociale numai HTML de la OstrIO este soluția perfectă pentru webmasteri, designeri și dezvoltatori care au nevoie de o soluție ușoară de partajare a rețelelor sociale pentru site-urile lor minimaliste.
De asemenea, suntem de acord că aceste icoane vor BENEFICIA orice proiect la scară, așa că nu vă lăsați limitați de conceptul numai HTML.
Mai mult, acest set are și patru seturi de dimensiuni diferite, ceea ce îl face foarte ușor de integrat în site-uri web de toate dimensiunile și formele.
Disponibilitatea pictogramelor de pe rețelele sociale variază de la Pinterest la VKontakte, la Facebook și Twitter și ALTELE.
Plasați cursorul peste butoanele sociale
Dacă doriți să condimentați lucrurile cu pictograme de socializare interesante pe site-ul dvs., acestea vor face cu siguranță trucul. Cu un efect de hover pentru ei, ar putea părea destul de simplu la prima vedere, dar nu atât de mult când cursorul mouse-ului le lovește.
Facebook, Pinterest, LinkedIn, YouTube Behance, îl numești, există foarte multe soluții pe care ți le oferă această colecție.
Aproape fiecare buton are un efect de plutire DIFERIT, așa că mergeți mai departe, mergeți la previzualizare și verificați-le singur. Vă veți bucura de acest lucru dacă doriți să păstrați lucrurile simple și creative.
Butoane de rețele sociale animate
Nu numai că aceste butoane din rețelele sociale au o animație îngrijită, dar au și un efect de gradient rece. Odată ajuns pe site-ul sau blogul dvs., toți vizitatorii dvs. le vor observa fără nici o îndoială.
Și odată ce ar plasa deasupra lor, entuziasmul va trece prin acoperiș.
De ce? Pentru că vă spun un lucru - nu se așteptau!
Chiar dacă vă place prezența dvs. online să fie la fel de ordonată și ordonată, puteți oricând ÎMBOGĂȚI lucruri cu detalii mici, cum ar fi pictogramele de pe rețelele sociale.
Acestea nu vă vor aglomera excesiv pagina cu nicio dramă, ci vor stimula experiența.
Icoane sociale animate
Ți-au ieșit mai multe pictograme animate de social media. Această colecție specială are același efect pentru toate pictogramele, indiferent dacă este vorba de Facebook sau Twitter, Pinterest sau YouTube.
Când treceți deasupra lor cu cursorul mouse-ului, acestea circulă . Pentru ceva un pic mai de bază, acest șablon va face cu siguranță trucul.
Lăsați site-ul, blogul sau magazinul dvs. online să aibă pictograme de socializare care nu sunt plictisitoare și plictisitoare.
Acestea nu te costă nici măcar un ban, așa că pune mâna pe ele și testează lucrurile pe pagina ta pentru a vedea cât de bine o decorează. Puțină muncă pentru rezultate minunate.
Butoane și pictograme sociale CSS
Recunoaștem, multe dintre seturile de pictograme de pe lista noastră sunt deja cu adevărat uimitoare și vor oferi o experiență excelentă de partajare socială pentru milioane de utilizatori web.
Acest set imens de butoane și icoane sociale CSS3 va revoluționa modul în care vă afișați informațiile despre rețelele sociale pe site-urile, aplicațiile, proiectele, blogurile dvs. și așa mai departe.
De la butoane simple Evernote, la mai multe butoane TEHNICE precum „Citiți mai multe la Smashing Magazine” sau „Disponibil în App Store” și altele.
Acest tip de icoane va adăuga cu adevărat caracter conținutului dvs. Acest lucru va crește, de asemenea, șansele de a obține acțiuni sociale și, aparent, vânzări
Butoane sociale circulare
Icoanele pătrate sunt cu siguranță foarte dominante pe piața actuală de seturi de icoane sociale.
Shahnur Alam dorește să ajute la schimbarea acestui lucru oferind (construindu-se el) un număr mare de icoane sociale rotunde pentru cele mai populare rețele sociale de acolo.
Putem vedea acest set special apărând pe site-urile scriitorului MINIMALISTIC, precum și în jurnalele personale și altele.
Butoane sociale cu fonturi de pictograme
David Pottrell dezvoltă și împărtășește lucruri de mult timp. Butoanele sale sociale setate cu fonturi de pictograme încorporate este una dintre cele mai bune execuții ale unui astfel de concept de set de pictograme.
Viziunea lui David este de a oferi soluții de pictograme sociale cu scheme de culori adecvate. Pentru a termina totul, adaugă un font cu pictograma mărcii lângă fiecare dintre elemente. Această ACȚIUNE sigilează afacerea pentru autenticitatea fiecărei pictograme.
Suntem uimiți de abilitățile HTML5 și CSS3 pe care David ni le aduce în atenție.
Buton FLAT Beauty Social cu CSS3-tranziție
Designul FLAT nu a fost consecvent în rezumatul nostru aici. Dar vom încerca să remediem acest lucru prin introducerea unor lucrări cu adevărat spectaculoase și frumoase de la SMTashrik Anam.
El dorește să ofere pictograme care utilizează EFECTELE DE TRANZIȚIE CSS3 pentru a amplifica o experiență de partajare socială dinamică și interactivă.
Rulați peste fiecare dintre pictograme și urmăriți cum se desfășoară pentru a vă descoperi propriul text specific la alegere.
Butoane sociale CSS simpliste
Simplul nu dezamăgește niciodată, deși unii ar putea numi acest set special unul modern și oarecum complex . Credem cu adevărat că acesta este unul dintre cele mai simple seturi sociale de pe lista noastră de până acum.
Acesta va funcționa deosebit de bine în situațiile în care dorim să ne promovăm profilurile. Puteți utiliza acest șablon, mai degrabă decât butoane directe de partajare socială în paginile noastre de conținut. Acest pachet acceptă Forrst, Dribbble, Flickr, Designmoo și multe altele.
Luați ceva timp pentru a o verifica și, probabil, pentru a o testa pe propriul site înainte de a lua decizia finală.
Rulează butoanele sociale
Setul de pictograme Roll Over prezintă pictogramele Soundcloud, Pinterest, Facebook, YouTube și Twitter.
Aceste pictograme vă vor permite să inserați un text răsturnat . Aceste texte vor apărea de fiecare dată când un vizitator trece peste una dintre pictogramele din acest set.
Acesta a fost creat de Hugo Darby-Brown. El a folosit tehnologia CSS3 pură pentru a crea acest șablon și pentru a oferi o astfel de experiență PLĂCUTĂ de partajare.
Pictogramele sociale menționate mai sus și bazate pe HTML / CSS. Dacă sunteți în căutarea celor pe care le puteți utiliza în Adobe Photoshop, Illustrator sau altfel, ați putea dori să verificați această colecție de pictograme.