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];

Dir gefällt dieser Beitrag? Dann würde ich mich sehr darüber freuen, wenn du ihn teilen oder du einen Kommentar hinterlassen würdest. Vielen Dank! :)


Lade mich auf einen Kaffee ein

Für diesen Artikel und den Aufbau der Website ist jede Menge Kaffee geflossen. Wenn dir die Infos geholfen haben, freue ich mich jederzeit über neuen Treibstoff. Mit dem Klick auf den Button wirst du zu PayPal weitergeleitet. Dankeschön!

☕ Kaffee spendieren
Sebastian Würfel Avatar

Über mich

Seit über zehn Jahren nutze ich WordPress und schreibe auf verschiedenen Blogs. Als Spezialist für Content Marketing und SEO arbeite ich neben meiner Selbstständigkeit seit einiger Zeit für die NETZhelfer GmbH. Dort helfe ich verschiedenen Kunden als Website Booster. Auf meiner persönlichen Website berichte ich über meine Learnings.


Verpasse keine neuen Beiträge

Vielen Dank für den Support :) Und keine Sorge, ich spamme nicht. Natürlich ist eine Abmeldung vom Newsletter jederzeit möglich. Die Eintragung umfasst die Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß der Datenschutzerklärung.


Schreibe einen Kommentar