YouTube Popup Buttons

Auf dem neuesten YouTube-Design gibt es eine bestimmte Art von Button (am leichtesten im Footer zu finden), bei der der Standardzustand des Buttons eine sehr dezente Facette aufweist. Im :hover- und :focus-Zustand springt der Button hervor, um angeklickt zu werden.

Ich denke, dieses Design funktioniert gut im Kontext des YouTube-Footers. 1) Der Standardzustand ist sehr zurückhaltend, was bedeutet, dass diese Buttons auf einer Seite, auf der fast alles andere auffällt, nicht um Aufmerksamkeit konkurrieren. 2) Man erhält trotzdem die sehr reichhaltige/offensichtliche Erfahrung des Drückens eines Buttons. 3) Sie implizieren eine andere Funktionalität als die anderen Links im Footer (drücke diese, und etwas wird passieren; drücke einen Link, und du wirst zu einer anderen Seite geleitet). Sie halten dieses Versprechen auch ein, da jeder dieser Buttons ein Einstellungsfenster direkt darunter öffnet.

Hier ist eine Neuauflage davon. Beginne mit einem Button

<button class="button" role="button">
   Button #1
</button>

Und die Basisstile, einschließlich aller drei Zustände

.button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   -webkit-box-shadow: 0 1px 1px #fff;
   -moz-box-shadow:    0 1px 1px #fff;
   box-shadow:         0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
}
.button:hover, .button:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background:    -moz-linear-gradient(top, white, #E0E0E0);
   background:     -ms-linear-gradient(top, white, #E0E0E0);
   background:      -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
}

Demo ansehen   Dateien herunterladen

Besonderer Dank an Dennis Sa, der mir ein JSbin mit einigen Matte Buttons geschickt hat, an denen er arbeitete. Das brachte mich auf die YouTube-Buttons und veranlasste mich, dies alles zu starten.

Trevor Gerzen hat ihnen Übergänge hinzugefügt, wenn das deinem Geschmack entspricht.