9 Pulsanti di condivisione social CSS e JavaScript personalizzati

Ogni sito dovrebbe includere alcuni pulsanti social per aumentare la condivisione sul web. Ma i pulsanti di condivisione predefiniti non sono eccezionali e ciascuno ha uno stile diverso in base alla marca delle reti.

Ecco perché abbiamo curato questa piccola raccolta di pulsanti di condivisione personalizzati che puoi formattare e riutilizzare sul tuo sito. Se stai cercando bellissimi pulsanti di condivisione, questi modelli offrono un ottimo punto di partenza.

1. Condivisione laterale

Il primo è una delle mie tecniche preferite creata dallo sviluppatore Michael Schofield. Questa interfaccia utente del badge sociale con condivisione laterale fissa è molto comune nei grandi blog e nei siti di riviste.

Questi badge sociali possono rimanere posizionati in alto vicino al titolo o possono scorrere verso il basso con l'utente. Non ho trovato casi di studio che confrontino le differenze, ma immagino che i pulsanti fissi vedano conteggi di condivisioni più elevati. E in ogni caso sono così ben progettati che non sembrano spam o calzati nel layout.

Questo è probabilmente il miglior modello con cui iniziare se gestisci un blog e desideri alcuni badge di condivisione personalizzati.

2. Pulsanti immagine

Un altro stile di condivisione popolare è ripubblicare le immagini trovate su un sito web. Questo è popolare con Pinterest ma può funzionare bene per Facebook e Twitter e anche Google+.

Questi pulsanti immagine sono design personalizzati che utilizzano CSS3 puro e alcuni loghi di sfondo per ciascuno. Non si connettono ancora a nessun social network, ma i link di ancoraggio possono essere facilmente programmati per la condivisione sui social.

Il design è davvero il mio obiettivo qui perché sembrano fenomenali attaccati a qualsiasi immagine. Inoltre, la posizione dà davvero l'idea che stai cercando di incoraggiare le condivisioni dell'immagine stessa, non solo del post.

3. Attiva/disattiva condivisioni

Abbiamo tutti visto quei widget di condivisione di WordPress utilizzando la piccola icona di condivisione e il menu a comparsa. Dopo un po' possono diventare stantii, quindi aiuta a confonderli un po'.

Con questo frammento puoi rinnovare la tua condivisione sui social con un'animazione personalizzata e un menu nascosto. È perfetto per chiunque abbia un sito che vuole incoraggiare molte condivisioni su più reti.

Ogni icona è stata disegnata in puro CSS e l'animazione è controllata tramite jQuery. Dovresti essere in grado di copiarlo/incollarlo in qualsiasi layout e farlo funzionare. Si adatterebbe bene accanto al titolo di un articolo o anche in fondo dopo che le persone hanno finito di leggere. In ogni caso, aumenterà sicuramente le condivisioni social su tutta la linea.

4. Animazioni del cerchio

Per un po' di animazione divertente dai un'occhiata a questi pulsanti circolari creati da Stephane Lyver.

Ogni pulsante ha il suo effetto di animazione al passaggio del mouse e tutti possono integrarsi perfettamente in qualsiasi layout. Puoi anche cambiare lo sfondo e i colori delle icone in modo che risaltino su uno sfondo bianco.

Il tutto funziona su puro CSS e le icone vengono estratte da Font Awesome tramite Bootstrap.

Nota che anche questi pulsanti non si collegano direttamente ai collegamenti di condivisione social, ma questo può essere risolto facilmente con il codice giusto.

5. Pulsanti di condivisione semplici

Breve, dolce e al punto descrive meglio questi pulsanti di condivisione.

Usano semplici icone SVG dal set di icone Ionicons. Ma non hai bisogno di Ionic o di qualsiasi JavaScript per farli funzionare.

Invece usano il valore href insieme alle nuove opzioni della scheda per aprire i collegamenti di condivisione direttamente nel browser. Nessun JavaScript richiesto, nessun SVG goffo richiesto.

Se scavi nel set di icone di Ionic puoi persino trovare altre icone social che potresti voler aggiungere. Inoltre hai il pieno controllo degli stili nei CSS in modo da poter modificare le dimensioni, il riempimento, il colore del carattere e praticamente tutto il resto.

6. Social nascosti

Lo sviluppatore Chris Sevilleja ha creato questi pulsanti social nascosti tutti con puro CSS.

Alcuni siti Web utilizzano questa tecnica per incorporare badge di condivisione predefiniti all'interno di icone più piccole. Ma devo ammettere che questa è un'animazione unica, quindi non è una tendenza molto comune.

Il codice è davvero facile da configurare e tutto viene eseguito tramite CSS in modo da avere il pieno controllo. Chris ha persino sviluppato una penna simile per i badge social di Google+.

Entrambi i frammenti di codice sono fanatici per praticamente qualsiasi sito Web e le animazioni vengono eseguite in tutti i browser compatibili con CSS3.

7. Passa il mouse sui colori di sfondo

Ora ecco una configurazione di condivisione social davvero unica in cui il colore dello sfondo cambia in base al pulsante che passi con il mouse.

Ogni pulsante ha la propria icona personalizzata estratta da Font Awesome, quindi puoi persino espandere questo set per includere altre icone correlate. Mi piace molto anche questo approccio perché ha il fallback JavaScript per le modifiche al passaggio del mouse.

Ma lo sviluppatore web Christopher Grabinski ha creato un'alternativa CSS pura che funziona esattamente allo stesso modo (nei browser supportati).

Non credo che questa tecnica starebbe bene su un blog più grande, anche se potrebbe funzionare su siti più piccoli o post brevi di blog.

8. Condivisione volantino

Lo sviluppatore Kyle Lavery ha creato un fantastico pulsante di condivisione del riquadro a comparsa che ricorda l'approccio di Google ai riquadri dei materiali.

Questo utilizza un po 'di JavaScript ma sono solo 5 righe e non molto complesse. La magia dell'animazione è nel CSS che puoi personalizzare in base alle tue esigenze.

Ciò che è anche interessante è che l'HTML grezzo è incredibilmente semplice. Ha un contenitore di condivisione principale e quindi utilizza elementi div per i pulsanti. Fondamentalmente 5 righe di HTML e 5 righe di JavaScript, mescolate con un sacco di CSS, ti danno questo delizioso effetto.

Assolutamente una delle funzionalità di condivisione social più interessanti che abbia mai visto e lo stile di design dei materiali lo rende ancora più interessante.

9. Pulsanti di condivisione 3D

L'ultimo nella mia collezione è questo design 3D che utilizza le trasformazioni 3D CSS insieme ai pulsanti social.

Lo sviluppatore Fabrizio Bianchi ha creato questi pulsanti utilizzando puro CSS dalle icone alle animazioni di trasformazione. Le icone principali provengono da Font Awesome e l'unico codice JS è per incorporare i pulsanti all'interno.

Ma nel complesso questa è una pura soluzione CSS che dovrebbe funzionare bene su qualsiasi sito. Non a tutti piace l'effetto 3D, ma se si adatta al tuo design, provalo.