Recreating Netlify’s Neat-o Sliding Button Effect

Haben Sie die Presse-Seite von Netlify gesehen? Es ist einer dieser Orte, an denen man sich eine Download-Version des Firmenlogos herunterladen kann. Ich habe heute Morgen danach gesucht, weil ich das Logo als Beitragsbild für einen Post hier auf CSS-Tricks benötigte.

Nun, ich bemerkte, dass sie diese hübsch aussehenden Schaltflächen zum Herunterladen des Logos haben. Sie sind klein und scharf. Sie ziehen die Aufmerksamkeit auf sich, stören aber nicht.

Sie sind auch interaktiv! Sehen Sie, wie sie sich erweitern und bei Hover das Wort „Download“ offenbaren.

Schön, oder?! Ich bemerkte tatsächlich, dass sie in Safari etwas seltsam aussahen.

Das machte mich neugierig, wie sie hergestellt werden. Also habe ich sie hier als Demo nachgebildet und dabei einige der Abstandsdinge bereinigt

Siehe den Pen
Netlify Sliding Buttons von Geoff Graham (@geoffgraham)
auf CodePen.

Wie haben sie das gemacht? Das Rezept besteht eigentlich aus vier Zutaten

• Verwendung der left-Eigenschaft, um das „Download“-Label hinein- und herauszuschieben
• Verwendung von padding im Hover-Zustand der Schaltfläche, um zusätzlichen Platz für die Anzeige des „Download“-Labels bei Hover zu schaffen
• Deklarieren einer 1:1 scale() im Hover-Zustand der Schaltfläche, damit alle Inhalte beim Bewegen von Dingen enthalten bleiben.
• Festlegen einer transition für den padding der Schaltfläche, die background-position des Schaltflächen-Icons und die transform-Eigenschaft, um eine reibungslose Animation zwischen dem Standard- und dem Hover-Zustand der Schaltfläche zu ermöglichen.

Hier ist, wie das ohne alle Präsentationsstile aussieht

Siehe den Pen
Style-less Netlify Sliding Buttons von Geoff Graham (@geoffgraham)
auf CodePen.

Wenn Sie Schwierigkeiten haben, sich vorzustellen, was passiert, hier ist eine Illustration, die zeigt, wie das „Download“-Label außerhalb der Schaltfläche verborgen ist (dank overflow: hidden) und wo es beim Hover in Sichtweite geschoben wird.

Indem wir negative left-Werte für das Icon und das „Download“-Label vergeben, schieben wir sie aus dem Sichtfeld und setzen diese dann auf positive Werte zurück, wenn die gesamte Schaltfläche gehovert wird.

/* Natural State */
.button {
    background: 
      #f6bc00 
      url(data:image/svg+xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
}
  
.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

/* Hovered State */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

Beachten Sie, dass das Belassen der Dinge in diesem Zustand das Schaltflächen-Icon in Sicht bringen würde und genug Platz für das „Download“-Label schaffen würde, aber das Label würde beim Hover tatsächlich von der Schaltfläche schweben.

Siehe den Pen
Style-less Netlify Sliding Buttons von Geoff Graham (@geoffgraham)
auf CodePen.

Hier hilft die Anwendung einer 1:1-Skalierung auf die Schaltfläche, die Dinge intakt zu halten.

* Hovered State */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
  transform: scale(1, 1);
}

Diese Padding-Werte sind magische Zahlen. Sie werden bei Ihnen aufgrund der Schriftart, der Schriftgröße und anderer Faktoren unterschiedlich sein, daher kann Ihre Erfahrung variieren.

Die letzte Kernzutat ist die transition-Eigenschaft, die dafür sorgt, dass sich alles reibungslos an seinen Platz verschiebt, anstatt sich zu verstecken. Das sorgt für ein viel angenehmeres Erlebnis.

/* Natural State */
.button {
    background: 
      #f6bc00 
      url(data:image/svg+xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
    transition: padding .2s ease, background-position .2s ease, transform .5s ease;
}

Fügen Sie ein paar kleine Verzierungen hinzu, wie abgerundete Ecken und so, und Sie haben eine ziemlich schicke Schaltfläche.

Siehe den Pen
Netlify Sliding Buttons von Geoff Graham (@geoffgraham)
auf CodePen.