CSS: creare un bottone in stile mobile

Il mondo mobile rappresenta una seconda rinascita per lo standard CSS. Tutti i browser più diffusi per i dispositivi mobile hanno un buon supporto alle più recenti proprietà CSS3. Possiamo sfruttare questa caratteristica per prendere in prestito elementi dal mondo mobile e trasferirli in quello desktop. In questo articolo vedremo come creare un bottone in stile mobile.

Abbiamo questa marcatura:

<a href="#" class="btn">Invia</a>​

Con questi stili:

a.btn {
    border: 1px solid #222;
    background: #333333;
    font-weight: bold;
    color: #fff;
    text-shadow: 0  -1px  1px #000;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555), to( #333 ));
    background-image: -webkit-linear-gradient(#555, #333);
    background-image: -moz-linear-gradient(#555, #333);
    background-image:  -ms-linear-gradient(#555, #333);
    background-image:  -o-linear-gradient(#555, #333);
    background-image:  linear-gradient(#555, #333);
    text-decoration: none;
    font-family: Arial, sans-serif;
    padding: 0.3em 1em;
    width: 60px;
    display: block;
    margin: 2em;
    border-radius: 6px;
    text-align: center;
    letter-spacing: 0.1em;
}
​

Potete osservare il risultato finale in questa pagina.