Consiglio rapido: pulsanti social premibili in CSS3

() translation by (you can also view the original English article)

Ciao! Ho un consiglio rapido per te. Che ne dici di pulsanti per i social media premibili davvero grandiosi usando solo i CSS3? Suona fantastico, vero... bene, questo è ciò che ho in serbo per te oggi. Ti mostrerò come creare pulsanti davvero fantastici che puoi mettere su qualsiasi progetto, quindi iniziamo!~

Passo 1 Buttare giù un po' di codice HTML

Il codice qui è molto semplice, pulito e richiede solo poche righe.

Per la nostra classe principale useremo un .container che è usato soltanto se volete che i vostri abbiano esattamente lo stesso aspetto che in questo tutorial. Lo usiamo per posizionare i pulsanti al centro del nostro spazio di lavoro.
Poi useremo uno span per contenere il nostro pulsante e useremo la classe .button per creare spaziatura usando i margini nel nostro file CSS.
Infine aggiungeremo semplicemente un link, un'icona e del testo da mettere sul pulsante.


    <div class="container">
        <span class="button fb">
            <a href="#"><img src="https://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/fb.gif" alt="" />Like It</a>
        </span>
        
        <span class="button twit">
            <a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/tweet.gif" alt="" />Tweet It</a>
        </span>
        
        <span class="button mail">
            <a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/167_QuickTip_CSS3Buttons/images/mail.gif" alt="" />Email</a>
        </span>
    </div>

Questo è tutto per quanto riguarda il codice HTML per i pulsanti CSS3 e ora dovreste avere qualcosa di simile a questo...

Passo 2 Creare uno o più stili fantastici!

La prima cosa che aggiungeremo è un body con un bello sfondo blu ghiaia che si può trovare nei file sorgente. Poi aggiungeremo un colore ai nostri link e daremo stile al contenitore per centrare i pulsanti nella nostra pagina con margin: 0 auto.
Nessuno di questi tre stili è necessario quando userete i pulsanti nel vostro progetto, ma potreste voler creare uno stile specifico per i link, e per fare questo potete usare .button > a


body{
    background: url(../images/bg.jpg) repeat 0 0;
}

a{
    text-decoration: none;
  color:#333333;	
}

.container{
    width: 420px;
	margin: 10% auto 0; /* buttons pushed from the top by 10% */
}

Ora creiamo spazio tra i pulsanti così...

1
2	.button{
3	margin: 8px;
4	}

"Date ai vostri pulsanti uno stile che faccia in modo che gli utenti vogliano premerli.."

Ora che abbiamo i nostri begli spazi, possiamo iniziare a dar stile ai nostri pulsanti in modo che gli utenti vogliano premerli.

Creando un bel gradiente e un'ombreggiatura, possiamo dare ai pulsanti un po' di rilievo rendendoli più cliccabili. Poi aggiungiamo un po' di padding sopra, sotto e ai lati rendendo i pulsanti molto più facili da leggere.


.button a{
	font-family:font-family: 'Arvo', arial, serif;;
	font-size:16px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */
    -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 3px 4px -1px #464646;
	-webkit-box-shadow: 0 3px 4px -1px #464646;
	box-shadow: 0 3px 4px -1px #464646;
	padding: 6px 12px;	
}

Ora andiamo avanti e appiattiamo un po' il pulsante per farlo sembrare mezzo premuto usando il selettore :hover. Useremo anche il selettore :focus in modo da mantenere questi stili invece di duplicare il codice per quello stato.


.button a:hover, .button a:focus{
    background: #dfdfdf; /* Old browsers */
	background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* W3C */
	-moz-box-shadow: 0 1px 1px 0 #666666;
	-webkit-box-shadow: 0 1px 1px 0 #666666;
	box-shadow: 0 1px 1px 0 #666666;
}

Il pulsante a destra è come dovrebbe apparire lo stato hover.

Dopo aver creato l'effetto hover, aggiungeremo un po' di incasso (inset) ai pulsanti quando un utente clicca con il mouse, facendo sembrare che l'utente abbia premuto il pulsante. In questa tecnica abbiamo bisogno di usare due ombre e per fare questo semplicemente mettiamo una virgola fra di esse. Questo è il supporto per più di un'ombra.

1
2	.button a:focus{
3	-moz-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
4	-webkit-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
5	box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
6	}

A questo punto dovreste avere qualcosa come l'immagine sotto, con il bottone incassato nello stato di focus (il pulsante di esempio a sinistra).

Infine mettiamo un padding a destra per creare spazio tra le icone e il testo del pulsante, poi dovremmo spostare l'icona in basso per allinearla e, per farlo senza disturbare gli altri elementi, la soluzione migliore è di metterle una posizione relativa perché rimanga all'interno di .button e poi spingerla verso il basso di 2 pixel. Usando top invece di padding-top o di margin-top, influenziamo solo l'immagine invece dell'intero pulsante.


.button a > img{
	padding-right: 8px;
    position: relative;
    top: 2px;
}

Ok, questo è tutto per quanto riguarda lo stile e dovreste ritrovarvi con qualcosa così...

Se il vostro non è proprio come l'immagine sopra, tornate indietro e controllate il vostro lavoro.

E questo è tutto, gente...

Ottimo lavoro! Avete creato dei pulsanti in CSS3 davvero fantastici che invitano gli utenti ad agire. Grazie per aver partecipato e spero sinceramente che abbiate imparato qualcosa di nuovo e prezioso in questa lezione.
Restate sintonizzati per altri tutorial in arrivo. Inoltre potete vedere alcuni dei miei prodotti nel marketplace Envato sotto il profilo dell'autore.

Lasciate domande o commenti in seguito.