CSS Schnellstart – Knöpfe

Auf jeder Webseite sind irgendwo Buttons verbaut. Du wirst also irgendwann Knöpfe (Buttons) brauchen.

Diese kann man ganz einfach in CSS mit folgenden Eigenschaften designen:

.button {
  border-radius: 4px;
  border-style: none;
  background-color: #f4511e;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button:hover {
  background-color: #aa3815;
  border-style: none;
}

 

Das ist aber eine Menge CSS! Ich gehe mal kurz durch die Dinge, die du hier noch nicht kennst.

Die Eigenschaft transition bezieht sich auf Änderungen die im style passieren und hat was mit der Regel zutun, die .button:hover selektiert. Diese Regel legt fest, dass jede Änderung im Style eine halbe Sekunde überdauert. So bekommt man einen schönen Übergangseffekt hin.

Die cursor-Eigenschaft legt fest, welcher Mauszeiger gezeigt werden soll, wenn die Maus über dem Element ist.

Der Selektor ist ebenfalls etwas, was du noch nicht kennst. Das :hover ist ein besonderer Zustand des Elementes. Es gibt ein paar Zustände, die man in CSS selektieren kann, diese nennt man Pseudoklassen. Hover ist der Zustand, wenn die Maus über dem Element schwebt. Es gibt noch weitere Pseudoklassen, wie active, focus, visited. In der nächsten Lektion gehen wir auf diese noch ein.

Schauen wir uns das in Aktion an: