CSS-Taste
In diesem Abschnitt führen wir die Verwendung von CSS, um die Schaltfläche zu erstellen.
Einfacher Button-Stil
- -
CSS Beispiele
background-color: # 4CAF50; / * Grün * /
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Versuchen »
Button color
Wir können die verwenden background-color - Eigenschaft auf die Schaltfläche Farbe einzustellen:
CSS Beispiele
.button2 {background-color: # 008CBA;} / * Blau * /
.button3 {background-color: # f44336;} / * Rot * /
.button4 {background-color: # e7e7e7; color: black;} / * Grau * /
.button5 {background-color: # 555555;} / * Schwarz * /
Versuchen »
Button-Größe
Wir können die verwenden font-size Eigenschaft , um die Größe der Schaltfläche zu setzen:
CSS Beispiele
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Versuchen »
Abgerundete Taste
Wir können das nutzen border-radius Eigenschaft das Filet - Taste zur Einstellung:
CSS Beispiele
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Versuchen »
Button-Grenze Farbe
Wir können die verwenden border Eigenschaft einer Schaltfläche Rahmenfarbe:
CSS Beispiele
background-color: white;
Farbe: schwarz;
border: 2px solid # 4CAF50; / * Grün * /
}
...
Versuchen »
Hoverschaltfläche
Wir können verwenden :hover - Wähler den Stil indem Sie den Mauszeiger über die Schaltfläche zu ändern.
Tipp: Wir können den Einsatz transition-duration Eigenschaft auf "schweben" Effektgeschwindigkeit:
CSS Beispiele
-webkit Übergangsdauer: 0,4 s; / * Safari * /
Übergangsdauer: 0,4 s;
}
.Taste: Hover {
background-color: # 4CAF50; / * Grün * /
color: white;
}
...
Versuchen »
Button-Schatten
Wir können das nutzen box-shadow Eigenschaft einen Schatten auf die Schaltfläche hinzufügen:
CSS Beispiele
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);
}
Versuchen »
Schaltfläche Deaktivieren
Wir können die verwenden opacity Eigenschaft Transparenz hinzufügen (sieht ähnlich aus wie "gesperrt" , um Effekte Attribut) für die Schaltfläche.
Tipp: Was kann ich hinzufügen cursor - Eigenschaft und auf "nicht-erlaubt" ein behindertes Bild einzurichten:
Button-Breite
Standardmäßig hat sich die Größe der Schaltfläche Text auf der Schaltfläche entschieden (basierend auf passender Text Länge). Wir können die verwenden width Eigenschaft , um die Breite der Schaltfläche zu setzen:
Tipp: Wenn Sie eine feste Breite einstellen möchten , können Pixel (Pixel) als eine Einheit zu verwenden, wenn Sie ansprechende Tasten einstellen wollen als Prozentsatz festgelegt werden.
Button-Group
Entfernen von außen und fügen Sie float:left Tasten setzen:
Mit Grenze Button-Group
Wir können die verwenden border Eigenschaft auf die Schaltfläche Gruppe mit Rand zu setzen: