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
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Gestire progetti .NET + React in .NET Aspire
.NET Aspire per applicazioni distribuite
Anonimizzare i dati sensibili nei log di Azure Front Door
Utilizzare Container Queries nominali
Utilizzare Azure Cosmos DB con i vettori
Eliminare record doppi in Sql Server
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Potenziare la ricerca su Cosmos DB con Full Text Search
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Utilizzare l nesting nativo dei CSS