Esempi di Social Share Buttons

Questo esempio mostra tre pulsanti di condivisione dei social network più popolari. Il testo è nascosto, i pulsanti sono colorati con colori originali. In questo esempio, viene scelto il design del pulsante più familiare e la forma arrotondata crea un aspetto minimalista. Un ottimo esempio di pulsanti che possono essere posizionati vicino a un'area di contenuto, ad esempio vicino a testo o articolo.

È così che crei pulsanti a portata di mano per tutti gli utenti: il layout floating li fa seguire lo scorrimento su e giù della pagina e rimanere sempre a portata di mano. Nessuna possibilità che gli utenti li perdano dalla vista. Il design è minimalista, con forma squadrata e solo le icone dei media sui pulsanti.

Utilizzando le opzioni di personalizzazione, è possibile ottenere un aspetto completamente unico del widget. Questi pulsanti sono stati progettati per ripetere lo stile e i colori del sito web. Sono in bianco e nero, geometrici e minimalisti grazie al fatto di avere solo le icone dei media su di loro - senza i nomi.

Questi pulsanti sono realizzati in un design semplice e armonioso - sono di forma circolare e stile materiale. Il piacevole effetto di animazione “Slide” della diapositiva aggiunge un po 'di vivacità all'esperienza dell'utente. I pulsanti sono allineati al centro, ma puoi anche scegliere le varianti sinistra e destra.

Questi pulsanti sono di forma circolare, ma grazie alla larghezza responsive, il valore è stato modificato per renderli ovali e più consistenti. L'utente ha scelto la variante Flat dello stile e ha lasciato i colori originali, ma ha aggiunto il colore nero e l'animazione “rimbalzo” al passaggio del mouse.

Le icone a forma di rettangolo sono ben disposte in una griglia e mostrano sia le icone che il testo con i nomi dei media. Questi pulsanti sono ottimi per essere inseriti nell'area del contenuto, nel blocco finale di un articolo o in fondo alla pagina. Quando passi il mouse sopra, viene attivata l'animazione Slider e il colore dei pulsanti diventa nero.

L'autore ha modificato le etichette dei pulsanti e ha aggiunto una call to action a ciascuno di loro. Non ci sono icone dei media, ma vengono aggiunti i loro nomi. Lo sfondo dei pulsanti è stato cambiato in bianco e il colore del testo è quello originale per ciascuno dei media.

Per semplificare la condivisione del contenuto da parte degli utenti, in questo esempio, ci sono pulsanti per i messenger più popolari. I pulsanti salvano i colori originali e mostrano il nome e l'icona. Sono di forma arrotondata e grazie alla larghezza automatica, riempiono esattamente lo spazio giusto sulla pagina.