20 pulsanti dei social media HTML5 e Bootstrap 2022
Pubblicato: 2022-07-15Sblocca il potenziale dei social network utilizzando questi migliori (e più interessanti) modelli di pulsanti social, gratuitamente.
Abbiamo esaminato molti pulsanti e icone disponibili sul Web, ma ci siamo accontentati di questi 21.
Puoi facilmente trovare lo stile giusto grazie alla diversità di questa collezione.
Non finisce qui.
Se lo desideri, puoi anche abbellirli e marchiarli in base alla tua attività e al tuo sito web.
L'effetto della condivisione sociale può portare risultati molto positivi . L'abbiamo visto noi stessi anche in nicchie che potrebbero non essere troppo popolari su Facebook, Instagram, ecc.
Puoi utilizzare questi pulsanti social Bootstrap per condividere TUTTO ciò che desideri.
Diventa socievole!
Bottoni Bootstrap V15
Abbiamo tonnellate di diverse varianti di pulsanti per te, ma abbiamo deciso di includere solo quelle che ti beneficeranno di più. Inoltre, noterai che i kit includono più pulsanti, non solo quelli dei social media.
VINCI alla grande.
Bootstrap Buttons V15 è probabilmente il mio set preferito dalla lista. I pulsanti social sono disponibili in due diversi formati con un effetto ombra cool, che scompare al passaggio del mouse.
Bottoni Bootstrap V18
Bootstrap Buttons V18 è una raccolta di pulsanti diversi molto DISTINTI dagli altri. Tuttavia, ne ottieni anche di più tradizionali, quindi puoi scegliere il percorso che desideri.
Anche se non lo noti a prima vista, ogni pulsante include anche un'ombra che crea un fantastico effetto clic (svanendo).
Puoi provarlo tu stesso visitando la pagina di anteprima della demo dal vivo.
Bottoni Bootstrap V13
Anche se Bootstrap Buttons V13 è su uno sfondo scuro , puoi usarlo con altri stili di sfondi. Non è sempre necessario seguire le configurazioni predefinite.
Sentiti LIBERO di andare controcorrente.
Qui ottieni diversi stili di pulsanti dei social media, quindi troverai sicuramente il design che fa per te . La metà viene con un colore solido e metà solo con un contorno.
Bottoni Bootstrap V01
Un pacchetto di pulsanti social HTML semplici e versatili che puoi integrare rapidamente in qualsiasi sito Web o blog. Seguono il marchio di ogni piattaforma sociale, quindi sei libero di impiegarli così com'è.
Insieme alla variante con struttura in tinta unita, ci sono anche quelle con solo un contorno.
Inoltre, entrambe le versioni sono dotate di un effetto CLICK che agisce rimuovendo l'ombra.
Animazione di pulsanti sociali piatti fantasia di Colorlib
Colorlib porta le fantastiche animazioni CSS3 al livello successivo con il suo set di icone social animate Fancy Flat. Abbiamo le principali icone dei social network LinkedIn, Twitter, Instagram, Youtube, Github e Facebook integrate in semplici sfondi quadrati .
Molte altre icone sono disponibili anche grazie alla libreria Font Awesome che è a tua disposizione.
Passando con il mouse o facendo clic su ciascuna delle icone, si attiva un'ANIMAZIONE specifica che trasforma le icone in un cerchio anziché nel quadrato predefinito. Può essere un'aggiunta interessante a un sito Web già dinamico e interattivo.
Bottoni Social animati con Sass
Successivamente abbiamo un'icona sociale animata da SASS impostata da Colorlib che presenta suggerimenti specifici per ogni icona.
Ad esempio, ogni volta che qualcuno passa sopra una delle icone, riceverà immediatamente un suggerimento di notifica che dice di cosa tratta questa icona. Puoi personalizzarla COMPLETAMENTE per riflettere le tue idee e i tuoi messaggi, o semplicemente lasciarli come predefiniti specificando il social network.
Le icone sono disponibili anche per GitHub, Email, Facebook, LinkedIn, Twitter, Instagram, Youtube e altri social network basati su Font Awesome .
Inoltre, la combinazione di colori predefinita è lo sfondo grigio con il testo dell'icona bianco.
Font Fantastici pulsanti sociali forniti da Bootstrap
Infine, abbiamo una combinazione di due framework molto popolari sul Web: Bootstrap e Font Awesome.
Immagina se quei due avessero un bambino, cosa otterresti questo fantastico set di icone nientemeno che da Stan Williams. Queste icone si estenderanno fino a GitHub, Apple, Android, Skype e Stack Overflow e l'intera libreria Font Awesome di centinaia di icone.
Questo è il set da acquisire se hai bisogno di colore e dichiarazioni STRICT per le tue esigenze sociali.
Pulsanti sociali CSS/HTML minimi di Colorlib
Ecco alcune icone social pulite di Colorlib. Questo set presenta un'icona di colore grigio impostata per Facebook, Twitter, Instagram, Youtube, Behance e centinaia di altri.
Colorlib ha aggiunto un bordo facile da rimuovere che rende le icone più compatte e sarà molto più facile da integrare nei progetti.
Tuttavia, puoi sempre eliminare il bordo e utilizzare le icone che ti piacciono. Ad esempio, nei menu di navigazione del piè di pagina o dell'intestazione o all'interno delle aree dei contenuti.
Pulsanti sociali con scorrimento al passaggio del mouse
È fantastico vedere l'evoluzione del web e in particolare gli aspetti di progettazione di linguaggi come CSS3 e HTML5. Ecco un bellissimo e moderno set di icone proveniente da Colorlib.
Questo set presenta i quattro principali social network (LinkedIn, Twitter e Facebook) in una bella disposizione di colori e una custodia in scatola per contenere le icone all'interno.
L'effetto al passaggio del mouse è stato creato per aiutarti a mascherare i widget di condivisione dei social network predefiniti con icone social più accattivanti.
Passando con il mouse sopra la TUA VERSIONE delle icone, l'utente sarà in grado di vedere i pulsanti Mi piace, Condividi e Tweet diretti con conteggi di condivisioni reali!
Condividi pulsanti sociali
Colorlib condivide un set di pulsanti di condivisione social molto leggero che utilizza HTML5 per fornire una funzionalità molto accurata.
Ottieni un semplice widget "icona di condivisione" da aggiungere al tuo sito, ma facendo clic sul widget, molti siti di social network EXPANDS possono essere utilizzati per condividere contenuti o promuovere i tuoi profili di social media.
Nella solita moda Colorlib, queste icone sono dotate di una libreria completa di Font Awesome con tutte le sue centinaia di icone.
Pulsanti sociali alla moda
Chris Deacy ci offre una serie di eleganti icone social che forniranno effetti di sfondo al passaggio del mouse per la MASSIMA interattività tra le icone e l'utente.
Ogni set di icone social fornisce molte icone specifiche per i social network e in questa troviamo Twitter, Facebook, Skype e Dribble.
Ogni volta che passi il mouse su una delle icone, lo sfondo dell'icona si riempie del colore più dominante di ciascuno dei social network.
Una caratteristica piuttosto interessante che non passerà inosservata !
Pulsanti sociali che utilizzano solo HTML
Un set di icone social solo HTML di OstrIO è la soluzione perfetta per webmaster, designer e sviluppatori che necessitano di una soluzione di condivisione dei social media leggera per i loro siti Web minimalisti.
Siamo inoltre d'accordo sul fatto che queste icone VANTAGGIORANNO qualsiasi progetto in scala, quindi non lasciarti limitare dal concetto di solo HTML.
Inoltre, questo set ha quattro set di dimensioni diverse, che lo rendono semplicissimo da integrare in siti Web di tutte le dimensioni e forme.
La disponibilità delle icone dei social media varia da Pinterest a VKontakte, a Facebook e Twitter e ALTRI.
Pulsanti animati dei social media
Questi pulsanti dei social media hanno un'animazione ordinata, ma sono anche dotati di un fantastico effetto sfumato . Una volta sul tuo sito web o blog, tutti i tuoi visitatori li noteranno senza dubbio.
E una volta che si libreranno su di loro, l'eccitazione salirà alle stelle.
Come mai? Perché ti dico una cosa: non se lo aspettavano!
Anche se ti piace che la tua presenza online sia pulita, puoi sempre ARRICCHIRE le cose con piccoli dettagli, come le icone dei social media.
Non ingombreranno eccessivamente la tua pagina con alcun dramma, ma aumenteranno l'esperienza.
Icone sociali animate
Altre icone animate dei social media in arrivo. Questa particolare collezione ha lo stesso effetto per tutte le icone, siano esse Facebook o Twitter, Pinterest o YouTube.
Quando ci passi sopra con il cursore del mouse, circolano . Questo modello farà il trucco per qualcosa di un po' più BASIC.
Consenti al tuo sito Web, blog o negozio online di avere icone dei social media che non siano noiose.
Questi non ti costano nemmeno un centesimo, quindi mettili tra le mani e prova le cose sulla tua pagina per vedere quanto bene la decorano. Poco lavoro per risultati fantastici.
Icone e pulsanti sociali CSS
Ammettiamo che molti dei set di icone nel nostro elenco sono già davvero sbalorditivi e forniranno un'ottima esperienza di condivisione sui social a milioni di utenti web.
Questo enorme set di pulsanti e icone sociali CSS3 rivoluzionerà il modo in cui visualizzi le informazioni sui social media su siti Web, app, progetti, blog e così via.
Dai semplici pulsanti Evernote, a pulsanti più TECNICI come "Leggi di più su Smashing Magazine" o "Disponibile su App Store" e così via.
Questo tipo di icone aggiungerà carattere al tuo contenuto. Ciò aumenterà anche le tue possibilità di ottenere condivisioni social e vendite
Pulsanti sociali circolari
Le icone quadrate sono molto dominanti nell'attuale mercato dei set di icone sociali.
Shahnur Alam vuole aiutare a cambiare questa situazione fornendo (costruendosi) un vasto numero di icone social rotonde per i social network più popolari.
Questo particolare set appare su siti di scrittori MINIMALISTICI, diari personali e simili.
Pulsanti sociali con caratteri icona
David Pottrell sviluppa e condivide materiale da molto tempo ormai. I suoi pulsanti social impostati con caratteri di icone integrati sono tra le esecuzioni più fluide di un tale concetto di set di icone.
La visione di David è quella di fornire soluzioni di icone sociali con le combinazioni di colori appropriate. Per finire, aggiunge un carattere icona del marchio accanto a ciascun elemento. Questa AZIONE suggella l'accordo per l'autenticità di ciascuna delle icone.
Siamo sbalorditi dalle competenze HTML5 e CSS3 che David sta portando alla nostra attenzione.
Pulsante social FLAT Beauty con transizione CSS3
Il design FLAT non è stato coerente nella nostra carrellata qui. Ma cercheremo di risolverlo introducendo alcuni lavori davvero spettacolari e belli di SMTashrik Anam.
Vuole fornire icone che utilizzino gli EFFETTI DI TRANSIZIONE CSS3 per amplificare un'esperienza di condivisione sociale dinamica e interattiva.
Passa sopra ciascuna delle icone e osserva come si svolgono per scoprire il tuo testo specifico preferito.
Pulsanti sociali CSS semplicistici
Semplice non delude mai, anche se alcuni potrebbero chiamare questo particolare set moderno e alquanto complesso . Crediamo davvero che questo sia uno dei set sociali più semplici della nostra lista finora.
Puoi utilizzare questo modello anziché i pulsanti di condivisione social diretti all'interno delle nostre pagine di contenuti. Questo funzionerà particolarmente bene nelle situazioni in cui vogliamo promuovere i nostri profili. Questo pacchetto supporta Forrst, Dribbble, Flickr, Designmoo e molti altri.
Prenditi del tempo per verificarlo e magari PROVA sul tuo sito prima di PRENDERE la decisione finale.
Rotola sui pulsanti sociali
Il set di icone Roll Over include le icone Soundcloud, Pinterest, Facebook, YouTube e Twitter.
Queste icone ti permetteranno di inserire un testo di rollover . Questi testi appariranno ogni volta che un visitatore passa sopra una delle icone di questo set.
Hugo Darby-Brown ha realizzato questo. Ha utilizzato la pura tecnologia CSS3 per creare questo modello e fornire un'esperienza di condivisione senza interruzioni.
Icone social sopra elencate e basate su HTML/CSS. Se stai cercando quelli che puoi usare in Adobe Photoshop, Illustrator o altro, potresti voler controllare questa raccolta di icone.
Facci sapere se ti è piaciuto il post.