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.