1. Casa
  2. Pulsante CSS

Il miglior tutorial Pulsante CSS Nel 2024, in questo tutorial puoi imparare Stile di base Pulsante,colore del pulsante,pulsante Size,pulsante arrotondato,colore Pulsante bordo,Pulsante hover,pulsante ombra,pulsante Disabilita,pulsante Larghezza,pulsante Gruppo,Con confine Pulsante Gruppo,pulsante Animazione,

Pulsante CSS

In questa sezione, si introduce l'uso di CSS per creare il pulsante.

Stile di base Pulsante

Esempi CSS

apri un {
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

Blu Rosso Grigio Nero

Possiamo usare il background-color proprietà per impostare il colore del pulsante:

Esempi CSS

.button1 {background-color: # 4CAF50;} / * * Verde /
.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

12px 16px 20px 24px

Siamo in grado di utilizzare il font-size di proprietà per impostare la dimensione del pulsante:

Esempi CSS

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Prova »

pulsante arrotondato

4px 8px 12px 50%

Siamo in grado di utilizzare il border-radius proprietà per impostare il pulsante di filetto:

Esempi CSS

.button1 {border-radius: 2px;}
.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

.button1 {
background-color: white;
color: black;
border: 2px solid # 4CAF50; / * * Verde /
}
it.

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

apri un {
-webkit-transizione Durata: 0.4s; / * Safari * /
transizione Durata: 0.4s;
}

apri un: hover {
background-color: # 4CAF50; / * * Verde /
color: white;
}
it.

Prova »

pulsante ombra

Possiamo usare il box-shadow proprietà per aggiungere un'ombra al pulsante:

Esempi CSS

.button1 {
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:

Esempi CSS

.disabled {
Opacità: 0,6;
cursore: non-autorizzati;
}

Prova »

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.

Esempi CSS

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

Prova »

pulsante Gruppo

Pulsante


Rimuovere dall'esterno e aggiungere float:left insieme di pulsanti:

Esempi CSS

apri un {
float: left;
}

Prova »

Con confine Pulsante Gruppo

Pulsante


Possiamo usare il border di proprietà per impostare il gruppo di pulsanti con bordo:

Esempi CSS

apri un {
float: left;
border: 1px verde fisso
}

Prova »

pulsante Animazione

Esempi CSS

Mouse sopra il pulsante freccia per aggiungere:


Prova »

Esempi CSS

Aggiungere click effetto "increspatura":


Prova »

Esempi CSS

Fare clic quando si aggiunge "a tendina" effetto:


Prova »

Tutorial caldi

Contattaci

Pulsante CSS
10/30