Gestalten von interaktiven Buttons mit reinem CSS

Die Grundstruktur eines optisch ansprechenden Buttons

In unserem CSS-Dokument weisen wir unserem Button zuerst einige grundlegende gestalterische Elemente zu. Außerdem runden wir den Button mithilfe der Property border-radius ab und entfernen die border und die outline.

.button {
  font-size: 25px;
  font-family: Verdana, sans-serif;
  color: white;
  background-color: #ff3344;
  height: 75px;
  width: 220px;
  margin: 1em;
  border-radius: 2em;
  border: none;
  outline: none;
  cursor: pointer;
}

Der daraus resultierende Button kann sich bereits sehen lassen:

Hinzufügen interaktiver Funktionen

Um den Button interaktiv zu machen, benutzen wir die drei Zustände .button (Grundzustand des Buttons), .button:hover (Mauszeiger über Button) und .button:active (Klicken des Buttons).

Diesen Zuständen können wir verschiedene Eigenschaften, wie zum Beispiel background-color, box-shadow oder transform zuweisen, um die Buttons sowohl interaktiv als auch visuell ansprechender zu machen:

.button:hover – Gradient-Effekt

Erstellen wir nun einen Button mit einem Hover-Effekt in Form eines sich verschiebenden Farbverlaufs.

Zunächst fügen wir für den Normalzustand des Buttons (.button) einen linearen Farbverlauf (linear-gradient) als background-image ein. Des Weiteren vergrößern wir den Hintergrund mithilfe von background-size um 200% und fügen eine transition von 0.5 Sekunden hinzu.

.gradient {
  font-size: 25px;
  font-family: Verdana, sans-serif;
  color: white;
  background-image: linear-gradient(
    to right,
    #ff3344 0%,
    #db2a38 51%,
    #ff3344 100%
  );
  transition: 0.5s;
  background-size: 200% auto;
  height: 75px;
  width: 220px;
  margin: 1em;
  border-radius: 2em;
  border: none;
  outline: none;
  cursor: pointer;
}

Anschließend verändern wir den Farbverlauf für den Zustand .gradient:hover.

Da der Hintergrund um 200% vergrößert wurde, können wir diesen nun durch background-position: right center; nach rechts bewegen und einen anderen Teil des Hintergrundes sichtbar machen.

.gradient:hover {
  background-position: right center;
}

Und schon entsteht der Effekt eines sich bewegenden Verlaufes:

.button:active – 3D-Effekt

Als nächstes sehen wir uns den Zustand .button:active an. Mit dessen Hilfe können wir einen Button erstellen, der beim Klick den Eindruck erweckt, physisch »eingedrückt« zu werden.

Als ersten Schritt fügen wir unserem Standard-Button einen box-shadow in einer etwas dunkleren Farbe als die Ursprungsfarbe hinzu.

.drueckeffekt {
    font-size: 25px;
    font-family: Verdana, sans-serif;
    color: white;
    background-color: #ff3344;
    height: 75px;
    width: 220px;
    margin: 0.3em;
    border-radius: 2em;
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: 0 7px 0 #ba2330;
  }

Nun bewegen wir den Button im Falle eines Klicks um 7 Pixel nach unten. Außerdem entfernen wir den box-shadow und fügen eine transition von einer Sekunde hinzu.

.drueckeffekt:active {
    box-shadow: none;
    transform: translateY(7px);
    transition: all.1s;
  }

Und schon ist auch der 3D-Button fertig:

.button:hover und .button:active – Kombination beider Zustände

Die beiden Zustände .button:hover und .button:active können auch in Kombination miteinander eingesetzt werden, um einen noch interaktiveren Button zu gestalten. Diese Technik sehen wir uns nun anhand eines Beispiels genauer an.

Für den Grundzustand .button müssen wir in diesem Beispiel nichts verändern, deswegen beginnen wir direkt mit .button:hover. Dort lassen wir den Button durch die Property transform um das 1,05-fache wachsen. Außerdem fügen wir wieder eine transition hinzu.

.hoverclick:hover {
  transform: scale(1.05);
  transition: all.1s;
}

Für den Zustand .button:active tun wir das gleiche, nur mit dem Faktor 0.95.

.hoverclick:active {
  transform: scale(0.95);
  transition: all.1s;
}

Und das reicht schon, um diesen interaktiven Button zu erstellen:

Was sonst noch so möglich ist: »Pulse«-Effekt

Wenn man mit noch etwas komplexeren Properties wie zum Beispiel animation arbeitet, kann man seinen Button wie einen Radar »pulsieren« lassen.

Wir beginnen damit, unserem Button eine transition von 0,3 Sekunden hinzuzufügen:

.pulse {
  font-size: 25px;
  font-family: Verdana, sans-serif;
  color: white;
  background: #ff3344;
  height: 75px;
  width: 220px; 
  border: none;
  border-radius: 2em;
  margin: 1em;
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
}

Für den Zustand .button:hover heben wir den Button um 6 Pixel an:

.pulse:hover {
  transform: translateY(-6px);
}

Und nun wird es interessant: Wir definieren Properties für .button:hover::after.

Durch content:‘ ‘ wird eine Fläche erstellt, die wir jetzt durch width, height, und border sowie border-radius weiter definieren, um die Fläche in einen Ring umzuformen. border ist am Ende der sichtbare Ring. Jetzt positionieren wir mithilfe von position, top, left und transform den Ring mittig . Um den Ring in den Hintergrund zu bringen, verwenden wir den z-index. Nun fügen wir eine animation von 1,5 Sekunden hinzu, welche sich unendlich oft wiederholt.

.pulse:hover::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #ff3344;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

Die animation können wir nun mit keyframes weiter definieren.

Für 0% (Den Anfang der animation) setzen wir die Breite (width) und Höhe (height) auf 30 Pixel. Außerdem setzen wir die Deckkraft (opacity) auf das Maximum, also 1.

Für das Ende (100%) setzen wir die width und die height auf 300 Pixel und lassen die animation mittels opacity: 0 unsichtbar werden.

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
}
   100% {
    width: 300px;
    height: 300px;
    opacity: 0;
}

Jetzt pulsiert der Button, wenn man mit dem Mauszeiger darüber fährt:

Das waren unsere vier Beispiele, wie Buttons sinnvoll und ansprechend gestaltet werden können.

Hier nochmal eine Übersicht der wichtigsten Properties:

• background-color

• background-size

• background-image

• color

• border

• border-radius

• outline

• box-shadow

• transition

Wichtige Selektoren sind .button:hover und .button:active, um die drei verschiedenen Zustände des Buttons gestalten zu können.

Die Möglichkeiten, welche man hat, um mit reinem CSS Buttons schöner & interaktiver zu gestalten, sind nahezu endlos. Doch anhand dieser Beispiele sollte nun jede:r ein gutes Grundverständnis davon haben, wie man durch die verschiedenen Zustände & Properties Buttons auf ein höheres Niveau der Interaktivität bringt. Also heißt es jetzt:

Ausprobieren und kreativ werden!

Quellen

• https://www.youtube.com/shorts/qew5Hf_jT8E, 09. November 2023
• https://codepen.io/sfoxy/pen/XpOoJe, 09. November 2023
• https://www.youtube.com/watch?v=zXVNTlYBaF0&t=1, 09. November 2023