Pulsante CSS
In questa sezione, si introduce l'uso di CSS per creare il pulsante.
Stile di base Pulsante
Esempi CSS
background-color: # 4CAF50; / * * Verde /
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Prova »
colore del pulsante
Possiamo usare il background-color proprietà per impostare il colore del pulsante:
Esempi CSS
.button2 {background-color: # 008CBA;} / * Blue * /
.button3 {background-color: # f44336;} / * * Red /
.button4 {background-color: # e7e7e7; color: black;} / * * grigio /
.button5 {background-color: # 555555;} / * * Black /
Prova »
pulsante Size
Siamo in grado di utilizzare il font-size di proprietà per impostare la dimensione del pulsante:
Esempi CSS
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Prova »
pulsante arrotondato
Siamo in grado di utilizzare il border-radius proprietà per impostare il pulsante di filetto:
Esempi CSS
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Prova »
colore Pulsante bordo
Possiamo usare il border di proprietà di un colore pulsante di bordo:
Esempi CSS
background-color: white;
color: black;
border: 2px solid # 4CAF50; / * * Verde /
}
...
Prova »
Pulsante hover
Possiamo usare il :hover selettore per modificare lo stile posizionando il mouse sopra il pulsante.
Suggerimento: Possiamo usare la transition-duration di proprietà impostata su "librarsi" velocità di effetto:
Esempi CSS
-webkit-transizione Durata: 0.4s; / * Safari * /
transizione Durata: 0.4s;
}
apri un: hover {
background-color: # 4CAF50; / * * Verde /
color: white;
}
...
Prova »
pulsante ombra
Possiamo usare il box-shadow proprietà per aggiungere un'ombra al pulsante:
Esempi CSS
box-shadow: 0 16px 0 8px 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);
}
Prova »
pulsante Disabilita
Possiamo usare l' opacity proprietà per aggiungere la trasparenza (è simile a "disabile" attribuire effetti) per il pulsante.
Tip: Che cosa posso aggiungere cursor di proprietà e impostare su "non-permesso" per impostare l'immagine di un disabile:
pulsante Larghezza
Per default, la dimensione del testo pulsante sul tasto ha deciso (basato su testo lunghezza corrispondente). Possiamo utilizzare la width proprietà per impostare la larghezza del pulsante:
Suggerimento: se si desidera impostare una larghezza fissa possono utilizzare pixel (px) come unità, se si desidera impostare pulsanti sensibili possono essere impostati in percentuale.
pulsante Gruppo
Rimuovere dall'esterno e aggiungere float:left insieme di pulsanti:
Con confine Pulsante Gruppo
Possiamo usare il border di proprietà per impostare il gruppo di pulsanti con bordo: