CSS Buttons

Lernen Sie, wie Sie mit CSS die Styles für Schaltflächen einrichten.

Basis-Stil der Schaltfläche

Example

.button {
  background-color: #4CAF50; /* Grün */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Try It Yourself

Farbe der Schaltfläche

Verwenden Sie background-color Eigenschaft zum Ändern der Hintergrundfarbe der Schaltfläche:

Example

.button1 {background-color: #4CAF50;} /* Grün */
.button2 {background-color: #008CBA;} /* Blau */
.button3 {background-color: #f44336;} /* Rot */ 
.button4 {background-color: #e7e7e7; color: black;} /* Grau */ 
.button5 {background-color: #555555;} /* Schwarz */

Try It Yourself

Größe der Schaltfläche

Verwenden Sie font-size Eigenschaft zum Ändern der Schriftgröße der Schaltfläche:

Example

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

Try It Yourself

Verwenden Sie padding Eigenschaft zum Ändern der Innenabstand der Schaltfläche:

Example

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Try It Yourself

Abgerundete Schaltfläche

Verwenden Sie border-radius Eigenschaft zum Hinzufügen von Abgerundungen zu Schaltflächen:

Example

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Try It Yourself

farbige Umrandung der Schaltfläche

Verwenden Sie border Verwenden Sie die Eigenschaft, um eine farbige Umrandung für die Schaltfläche hinzuzufügen:

Example

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

Try It Yourself

kann überfahren werden


Verwenden Sie :hover Der Selector kann das Stil der Schaltfläche ändern.

Hinweis:Verwenden Sie transition-duration Verwenden Sie die Eigenschaft, um die Geschwindigkeit des "Mausüberfahrens"-Effekts zu bestimmen:

Example

.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #4CAF50; /* Grün */
  color: white;
}
...

Try It Yourself

Schatten-Schaltfläche

Verwenden Sie box-shadow Verwenden Sie die Eigenschaft, um Schatten für die Schaltfläche hinzuzufügen:

Example

.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);
}

Try It Yourself

deaktivierte Schaltfläche

Verwenden Sie opacity Verwenden Sie die Eigenschaft, um Transparenz für die Schaltfläche hinzuzufügen (um ein "deaktiviertes" Aussehen zu erzeugen).

Hinweis:Sie können auch eine Eigenschaft mit dem Wert "not-allowed" hinzufügen cursor Verwenden Sie die Eigenschaft, um anzuzeigen, dass der Cursor "no parking sign" (Verbotsschild) anzeigt, wenn Sie die Maus über die Schaltfläche bewegen:

Example

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Try It Yourself

Schaltflächenbreite


Standardmäßig hängt die Größe der Schaltflächen von ihrem Textinhalt ab (entspricht der Breite des Inhalts). Verwenden Sie: width Verwenden Sie die folgenden Eigenschaften, um die Breite der Schaltflächen zu ändern:

Example

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

Try It Yourself

Gruppierung von Schaltflächen

　

Entfernen Sie den Außenabstand und fügen Sie jeder Schaltfläche eine Breite hinzu: float:leftto create button groups:

Example

.button {
  float: left;
}

Try It Yourself

Bordered Button Groups

　

Use border Property to create bordered button groups:

Example

.button {
  float: left;
  border: 1px solid green;
}

Try It Yourself

Vertical Button Group

Use display:block Replace float:left Group buttons vertically instead of horizontally:

Example

.button {
  display: block;
}

Try It Yourself

Button on Image

Kaffee

Try It Yourself

Animated Buttons

Example 1

Add an Arrow on Hover:

Try It Yourself

Example 2

Add a 'Press' Effect on Click:

Try It Yourself

Example 3

Fade in on Hover:

Try It Yourself

Example 4

Add a 'Ripple' Effect on Click:

Try It Yourself