Come creare: pulsanti con contorni
- Pagina precedente Pulsante di avviso
- Pagina successiva Pulsante di separazione
Impara come utilizzare CSS per impostare lo stile dei pulsanti con contorni.
Come progettare lo stile dei pulsanti con contorni?
Primo passo - Aggiungi HTML:
<button class="btn success">Successo</button> <button class="btn info">Informazioni</button> <button class="btn warning">Avviso</button> <button class="btn danger">Danno</button> <button class="btn default">Predefinito</button>
Secondo passo - Aggiungi CSS:
.btn { border: 2px solid nero; background-color: bianco; color: nero; padding: 14px 28px; font-size: 16px; cursor: puntatore; {} /* Verde */ .success { border-color: #04AA6D; color: verde; {} .success:hover { background-color: #04AA6D; color: bianco; {} /* Blu */ .info { border-color: #2196F3; color: azzurro chiaro {} .info:hover { background: #2196F3; color: bianco; {} /* Arancione */ .warning { border-color: #ff9800; color: arancione; {} .warning:hover { background: #ff9800; color: bianco; {} /* Rosso */ .danger { border-color: #f44336; color: rosso {} .danger:hover { background: #f44336; color: bianco; {} /* Grigio */ .default { border-color: #e7e7e7; color: nero; {} .default:hover { background: #e7e7e7; {}
aggiungi border-radius
Proprietà per creare pulsanti con contorni arrotondati:
.btn { border-radius: 5px; {}
Pagine correlate
Tutorial:Pulsante CSS
- Pagina precedente Pulsante di avviso
- Pagina successiva Pulsante di separazione