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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Tailwind CSS all'interno di React: primi componenti
Reactive form tipizzati con modellazione del FormBuilder in Angular
Usare le variabili per personalizzare gli stili CSS
Paginare i risultati con QuickGrid in Blazor
Utilizzare Model as a Service su Microsoft Azure
Generare file PDF da Blazor WebAssembly con iText
Le novità di Angular: i miglioramenti alla CLI
Copiare automaticamente le secret tra più repository di GitHub
Hosting di componenti WebAssembly in un'applicazione Blazor static
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Creare form tipizzati con Angular