Pulsanti CSS
- Pagina precedente Sfumature CSS
- Pagina successiva Pagine CSS
Impara come impostare lo stile dei pulsanti utilizzando CSS.
Stile pulsante di base
Esempio
.button {
colore di sfondo: #4CAF50; /* Verde */
border: none;
colore: bianco;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Colore pulsante
Utilizza background-color Proprietà per modificare il colore di sfondo dei pulsanti:
Esempio
.button1 {background-color: #4CAF50;} /* Verde */
.button2 {background-color: #008CBA;} /* Blu */
.button3 {background-color: #f44336;} /* Rosso */
.button4 {background-color: #e7e7e7; color: black;} /* Grigio */
.button5 {background-color: #555555;} /* Nero */
Dimensione pulsante
Utilizza font-size Proprietà per modificare la dimensione del carattere dei pulsanti:
Esempio
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Utilizza padding Proprietà per modificare la spaziatura interna dei pulsanti:
Esempio
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Pulsanti arrotondati
Utilizza border-radius Proprietà per aggiungere arrotondamenti ai pulsanti:
Esempio
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {raggio bordo: 12px;}
.button5 {raggio bordo: 50%;}
Bordo del pulsante colorato
Utilizza border Proprietà per aggiungere bordi colorati al pulsante:
Esempio
.button1 {
colore di sfondo: bianco;
colore: nero;
bordo: 2px solido #4CAF50; /* Verde */
}
...
Pulsante hoverabile
Quando il mouse è sopra il pulsante, utilizza :hover Selettore per modificare lo stile del pulsante.
Suggerimento:Utilizza durata transizione Proprietà per determinare la velocità dell'effetto "sopra il mouse":
Esempio
.button {
durata transizione: 0.4s;
}
.button:hover {
colore di sfondo: #4CAF50; /* Verde */
colore: bianco;
}
...
Pulsante con ombra
Utilizza box-shadow Proprietà per aggiungere ombra al pulsante:
Esempio
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Pulsante disabilitato
Utilizza opacità Proprietà per aggiungere opacità al pulsante (crea un aspetto disabilitato).
Suggerimento:Puoi anche aggiungere un cursore con valore "not-allowed" cursor Proprietà che mostra il "segno di divieto di sosta" (segno di divieto) quando il mouse è sopra il pulsante:
Esempio
.disabled {
opacità: 0.6;
cursor: non consentito;
}
Larghezza del pulsante
Per impostazione predefinita, la dimensione del pulsante dipende dal contenuto del testo (uguale alla larghezza del contenuto). Utilizza larghezza Proprietà per modificare la larghezza del pulsante:
Esempio
.button1 {larghezza: 250px;}
.button2 {larghezza: 50%;}
.button3 {larghezza: 100%;}
Gruppo di pulsanti
Rimuovi i margini esterni e aggiungi una proprietà a ogni pulsante float:leftper creare un gruppo di pulsanti:
Esempio
.button {
float: left;
}
Gruppo di pulsanti con bordi
Usa border Proprietà per creare un gruppo di pulsanti con bordi:
Esempio
.button {
float: left;
border: 1px solid green;
}
Gruppo di pulsanti verticale
Usa display:block Sostituisci float:left Raggruppa i pulsanti verticalmente, non orizzontalmente:
Esempio
.button {
display: block;
}
Pulsante animato
Esempio 1
Aggiungi l'ago all'hover del mouse:
Esempio 2
Aggiungi l'effetto 'pressione' quando si clicca:
Esempio 3
Sfumatura all'hover del mouse:
Esempio 4
Aggiungi l'effetto 'onde' quando si clicca:
- Pagina precedente Sfumature CSS
- Pagina successiva Pagine CSS
