Quando sviluppiamo un'app Windows 8 abbiamo a disposizione due toolbar (una superiore e una inferiore) all'interno delle quali posizioniamo dei pulsanti che hanno uno stile ben preciso che lo stesso WinRT ci mette a disposizione. I bottoni sono rotondi, con un'icona dentro e un testo sotto. In questo script vedremo come ricreare lo stesso stile usando solamente HTML e CSS.

Per prima cosa dobbiamo dichiarare un bottone.

<button>Salva</button>

Una volta creato il bottone, da CSS ne impostiamo altezza e larghezza e successivamente ne impostiamo l'arrotondamento del bordo esattamente alla metà delle dimensioni così da ottenere un cerchio.Uuna volta fatto questo non ci resta che impostare un'immagine di sfondo e spostare il testo sotto il cerchio usando la proprietà CSS line-height. Tutto questo è fatto dal seguente codice CSS.

body{
    background: #000;
} 

button{
    width: 50px;
    height:50px;
    border-radius: 25px 25px;
    border: solid 1px white;
    background: url(save.png) no-repeat 10px #000;
    color: white;
    line-height: 110px;
}

L'inconveniente di questa tecnica è che se il testo del bottone è lungo e va su più linee, il line-height mostra la seconda riga molto in basso (su 110px) e quindi si devono cercare altre strade.