Einfacher Button mit CSS

Manchmal reicht ein einfacher Button ohne fancy Effekte. Wie so ein minimalistischer Button mit CSS aussehen kann, dafür findest du hier ein einfaches Beispiel.

Natürlich kannst du die Farbe unter der Property „color“ anpassen und statt dem schlichten Grau auch ein Grün oder Blau als Farbton auswählen.

Die „opacity“-Property mit dem Wert „0.75“ sorgt dafür, dass du einen schlichten Hover-Effekt hast.

.button {
  border: none;
  font-family: inherit;
  background-color: #444;
  color: #fff;
  text-decoration: none;
  padding: 12px;
  border-radius: 3px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.25);
}

.button:hover, button:focus {
  cursor: pointer;
  opacity: 0.75;
}

Beispiel-Button

Um einen einfachen Übergang zwischen den „States“ (z.B. vor und während des Gleitens der Maus auf den Button), kannst du exemplarisch folgenden Code einfügen:

.button { /* Styles siehe oben plus folgende Zeile */
transition: 0.2s opacity;
}

Beispiel-Button mit Übergang

Als Eselsbrücke für die Transition gilt folgende Kurzschreibweise:

• transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];