Einen reinen CSS Play/Pause-Button erstellen

Weltweit sind Mediensteuerungssymbole eine der universell verständlichsten visuellen Sprachen in jeder Art von Benutzeroberfläche. Ein Designer kann einfach davon ausgehen, dass jeder Benutzer nicht nur weiß, dass ▶️ = Play bedeutet, sondern dass Benutzer auch nach dem Symbol suchen, um Videos oder Animationen anzusehen.

Berichten zufolge in den 1960er Jahren vom schwedischen Ingenieur Philip Olsson eingeführt, wurde der Play-Pfeil erstmals entwickelt, um die Richtung anzuzeigen, in die das Band beim Lesen auf Reel-to-Reel-Bandgeräten lief. Seitdem haben wir von Kassetten zu CDs, vom iPod zu Spotify gewechselt, aber die Symbole für die Mediensteuerung sind gleich geblieben.

Das Play ▶️ Symbol ist ein Standard-Symbol (mit eigenem Unicode) zum Starten von Audio-/Videomedien, zusammen mit anderen Symbolen wie Stopp, Pause, Vorspulen, Zurückspulen und anderen.

Es gibt Unicode- und Emoji-Optionen für Play-Button-Symbole, aber wenn Sie etwas Benutzerdefiniertes wünschen, könnten Sie zu einer Icon-Schriftart oder einer benutzerdefinierten Ressource greifen. Aber was, wenn Sie zwischen den Symbolen wechseln möchten? Kann diese Änderung reibungslos erfolgen? Eine Lösung könnte die Verwendung von SVG sein. Aber was, wenn es mit 10 Zeilen CSS möglich wäre? Wie raffiniert ist das denn‽

In diesem Artikel bauen wir sowohl einen Play- als auch einen Pause-Button mit CSS und untersuchen dann, wie wir CSS-Übergänge verwenden können, um zwischen ihnen zu animieren.

Play-Button

Schritt eins

Wir wollen ein nach rechts zeigendes Dreieck erzielen. Beginnen wir damit, eine Box mit einem dicken Rahmen zu erstellen. Derzeit sind Boxen die bevorzugte Basismethode zur Erstellung von Dreiecken. Wir beginnen mit einem dicken Rahmen und hellen Farben, um unsere Änderungen zu sehen.

<button class='button play'></button>

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

Schritt zwei

Das Rendern eines einfarbigen Rahmens ergibt das obige Ergebnis. Versteckt hinter der Farbe des Rahmens verbirgt sich ein kleiner Trick. Wie wird der Rahmen genau gerendert? Ändern wir die Rahmenfarben, eine für jede Seite, das hilft uns zu sehen, wie der Rahmen gerendert wird.

.button.play {
  ...
  border-width: 37px 37px 37px 37px;
  border-color: red blue green yellow;
}

Schritt drei

An der Schnittstelle jedes Rahmens werden Sie feststellen, dass sich ein 45-Grad-Winkel bildet. Dies ist eine interessante Art, wie Browser Rahmen rendern, und eröffnet daher die Möglichkeit für verschiedene Formen, wie Dreiecke. Wie wir unten sehen werden, wenn wir `border-left` breit genug machen, scheint es, als ob wir ein Dreieck erreichen könnten!

.button.play {
  ...
  border-width: 37px 0px 37px 74px;
  border-color: red blue green yellow;
}

Schritt vier

Nun, das hat nicht wie erwartet funktioniert. Es ist, als ob die innere Box (der eigentliche Div) darauf bestand, ihre Breite zu behalten. Der Grund dafür liegt in der Eigenschaft box-sizing, die standardmäßig den Wert content-box hat. Der Wert content-box weist den Div an, jeden Rahmen *außerhalb* zu platzieren, wodurch sich die Breite oder Höhe erhöht.

Wenn wir diesen Wert auf border-box ändern, wird der Rahmen *innerhalb* der Box hinzugefügt.

.button.play {
  ...
  box-sizing: border-box;
  width: 74px;
  height: 74px;
  border-width: 37px 0px 37px 74px;
}

Letzter Schritt

Jetzt haben wir ein richtiges Dreieck. Als nächstes müssen wir den oberen und unteren Teil (rot und grün) entfernen. Dies tun wir, indem wir die border-color dieser Seiten auf transparent setzen. Die Breite gibt uns auch Kontrolle über die Form und Größe des Dreiecks.

.button.play {
  ...
  border-color: transparent transparent transparent #202020;
}

Hier ist eine Animation, die das erklärt, wenn das hilfreich ist.

Pause-Button

Schritt eins

Wir fahren mit der Erstellung unseres Pausesymbols fort, indem wir mit einer weiteren Box mit dickem Rahmen beginnen, da die vorherige so gut funktioniert hat.

<button class='button pause'></button>

.button.pause {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

Schritt zwei

Dieses Mal verwenden wir eine weitere CSS-Eigenschaft, um das gewünschte Ergebnis von zwei parallelen Linien zu erzielen. Wir ändern den border-style auf double. Die doppelte Eigenschaft bei `border-style` ist ziemlich einfach: Sie verdoppelt den Rahmen, indem sie einen transparenten Strich dazwischen hinzufügt. Der Strich oder die leere Lücke beträgt 33 % der angegebenen Rahmenbreite.

.button.pause {
  ...
  border-style: double;
  border-width: 0px 37px 0px 37px;
}

Letzter Schritt

Eigenschaft `border-width`. Die Verwendung von `border-width` ist es, die den Übergang im nächsten Schritt reibungslos macht.

.button.pause{
  ...
  border-width: 0px 0px 0px 37px;
  border-color: #202020;
}

Animation des Übergangs

Bei den beiden oben erstellten Buttons fällt auf, dass es viele Ähnlichkeiten gibt, aber zwei Unterschiede: border-width und border-style. Wenn wir CSS-Übergänge verwenden, können wir zwischen den beiden Symbolen wechseln. Es gibt keinen Übergangseffekt für border-style, aber border-width funktioniert hervorragend.

Ein Toggle mit der Klasse pause animiert nun zwischen dem Play- und Pause-Zustand.

Hier ist der finale Stil in SCSS

.button {
  box-sizing: border-box;
  height: 74px;
  
  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;
  cursor: pointer;

  // play state
  border-style: solid;
  border-width: 37px 0 37px 60px;

  // paused state
  &.pause {
    border-style: double;
    border-width: 0px 0 0px 60px;
  }
}

Demo

Sieh dir den Pen Button Transition with Borders von Chris Coyier (@chriscoyier) auf CodePen an.

Umschalten ohne JavaScript

Bei einem realen Play/Pause-Button werden Sie mit ziemlicher Sicherheit JavaScript verwenden, um den Zustand des Buttons umzuschalten. Aber es ist interessant zu wissen, dass es einen CSS-Weg gibt, dies zu tun, indem ein Input-Element und ein Label verwendet werden: der Checkbox-Hack.

<div class="play-pause">
  <input type="checkbox" value="" id="playPauseCheckbox" name="playPauseCheckbox" />
  <label for="playPauseCheckbox"></label>
</div>

.playpause {
  label {
    display: block;
    box-sizing: border-box;
    
    width: 0;
    height: 74px;
    
    cursor: pointer;

    border-color: transparent transparent transparent #202020;
    transition: 100ms all ease;
    will-change: border-width;
    
    // paused state
    border-style: double;
    border-width: 0px 0 0px 60px;
  }
  input[type='checkbox'] {
    visibility: hidden;
    
    &:checked + label {
      // play state
      border-style: solid;
      border-width: 37px 0 37px 60px;
    }
  }
}

Demo

Sieh dir den Pen Toggle Button with Checkbox von Chris Coyier (@chriscoyier) auf CodePen an.

Ich freue mich auf Ihre Gedanken und Ihr Feedback. Bitte fügen Sie sie unten in die Kommentare ein.