Pulsanti css3 e box-shadow

Da dove comincio?

Prendiamo in esame un solo pulsante, quindi creiamo un’ancora attribuendole due classi, “.button_one” per colore, ombre e sfumature, e “.glass” esclusivamente per l’effetto “vetro” in alto.

Ecco il codice html:

<div class="menu">
    <a href="#" class="button_one glass">BUTTON ONE</a>
</div>

La proprietà box-shadow

Prima di continuare con il codice css analizziamo la proprietà box-shadow, che effettivamente è alla base dei nostri pulsanti. Questa proprietà associa una o più ombre all’elemento. La dichiarazione è composta dalla lista di ombre separate da virgole, ciascuna con i propri valori di posizionamento, colore ed opacità.

#element{
    box-shadow: 5 1.2em 0.5em rgba(255, 255, 255, 0.40) inset, 7 0.2em 2px #8ab600, 1 0.4em 0px #536e00;
}

Divertiamoci con il Css

Creato il codice html non ci resta che applicare le regole appena elencate e dare vita al nostro pulsante. Impostiamo innanzitutto la dimensione e le varie proprietà relative al font:

.button_one{
    display:block;
    width:150px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    padding:10px;

Eccoci giunti alla parte più importante, mettiamo in pratica ciò che abbiamo teorizzato poco fa:

.button_one{
    /* posizione orizzontale, posizione verticale + sfocatura + colore + inset(ombra interna) */
    box-shadow: 0 1.2em 0.5em rgba(255, 255, 255, 0.40) inset;
}

.button_one{
/* posizione orizzontale, posizione verticale + sfocatura + colore */
box-shadow:0 0.2em 2px #8ab600;

.button_one{
/* posizione orizzontale, posizione verticale + sfocatura + colore */
box-shadow:0 0.4em 0px #536e00;

.button_one{
/* posizione orizzontale, posizione verticale + sfocatura + colore + opacità */
box-shadow:0 0.6em 4px rgba(0, 0, 0, 0.2);

Infine creiamo l’effetto vetro con la proprietà content già presentata in questo articolo. Con questa dichiarazione si va a creare un contenuto vuoto per la classe “.glass”, lo si sposta sopra al pulsante con la posizione assoluta e con il settaggio gradient della proprietà background gli si applica la sfumatura:

.button_one.glass:after{
    content:"";
    position:absolute;
    width:160px;
    height:20px;
    top:101px;
    left:6px;

    -webkit-border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em;
    -moz-border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em;

    background-image:-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
    background-image:-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );
    background-image:gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
    opacity:.7;
}