Tutto ruota intorno ai CSS3? Ultimamente sì, vediamo quindi come creare dei semplici, ma carinissimi, pulsanti in 3D per le nostre icone social.
Il processo e le regole CSS3 utilizzate sono davvero molto semplici, si tratta solo di mixarle nella maniera corretta. Ma andiamo subito al sodo…
Il markup HTML
Un semplice link, nulla più nulla meno con una classe identificativa (ci serve per specificare l’immagine di sfondo da utilizzare). Nell’esempio utilizzeremo un file .svg, vettoriale quindi, in modo che possiamo gestirne le dimensioni senza perdite di qualità:
<a href="#" class="pinterest-small">Pinterest<a>
CSS3 at the opera
Che cosa ci interessa di tutto il codice apparentemente infinito che vi ho incollato qui sotto? In realtà ben poco… Infatti il “trucco” è molto semplice. In primis utilizziamo la proprietà box-shadow (solida) per creare l’effetto pulsante sotto al nostro link. In seguito applichiamo la trasformazione CSS3, tramite la proprietà translate() (e la transizione per rendere fluido il passaggio) in modo che, al momento dell’attivazione del pulsante l’ombra si riduca di dimensioni ed il pulsante stesso venga traslato simulando così la pressione. Un trick molto semplice ma dall’effetto garantito! In fondo alla pagina trovate il risultato finito!
a {
position: relative;
color: #ffffff;
text-decoration: none;
display: block;
border-radius: 6px;
width: 60px;
text-align: center;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
height:54px;
cursor:pointer;
overflow:hidden;
text-shadow: none;
color: transparent;
text-indent:-9999px;
outline:none;
}
a:active {
-webkit-transform: translate(0, 3px);
-moz-transform: translate(0, 3px);
transform: translate(0, 3px);
}
a.pinterest-small{
-webkit-box-shadow: 0px 6px 0px #ac1e24;
-moz-box-shadow: 0px 6px 0px #ac1e24;
box-shadow: 0px 6px 0px #ac1e24;
}
a.pinterest-small{
background:#cb2027 url("https://www.gleenk.com/demo/pinterest.svg") no-repeat center center;
background-size:75% 75%;
}
a.pinterest-small:active{
-webkit-box-shadow: 0px 2px 0px #ac1e24;
-moz-box-shadow: 0px 2px 0px #ac1e24;
box-shadow: 0px 2px 0px #ac1e24;
} 
