Wir haben uns vor kurzem hier auf CSS-Tricks mit dem Überschreiben von Standard-Button-Stilen beschäftigt. Mit standardmäßig vollständig browserübergreifend unterstützten Stilen benötigen Sie 6-10 CSS-Regeln, um alles niederzureißen, was Sie von einem Button entfernen müssen, und dann Ihre eigenen einzusetzen …
Schauen wir uns an, wie wir Webseiten visuell leistungsfähiger machen können, indem wir die Freiheit von <canvas></canvas> mit HTML-Elementen kombinieren. Speziell erstellen wir einen einfachen HTML-zu-Partikel-Effekt, aber die gleiche Technik könnte für … verwendet werden.
Es gibt eine Vielzahl von „Buttons“ in HTML. Sie haben
<button>Button</button>
<input type="button" value="Button"/>Außerdem mögen die Leute, ob zum Besseren oder Schlechteren, Links, die dem Aussehen anderer echter Buttons auf der Website entsprechen
<a href="#0" class="button">Button</a>Tyler Sticka über die Komplexität der Gestaltung von Buttons und die Sicherstellung, dass wir Fokus-, Hover- und aktive Zustände während des Designprozesses berücksichtigt haben
…Eigentlich sind Maus-Effekte wahrscheinlich der am wenigsten wichtige Zustand, für den man gestalten muss. Durch Berücksichtigung
Sie sind wahrscheinlich bestens damit vertraut, wie Links ohne jegliches Styling aussehen. Dieses Blau. Diese Unterstreichung. Das ist ein Link in seiner reinsten Form. Aber was ist, wenn wir die Dinge ein wenig ändern wollen? Vielleicht passt Blau nicht zum Design Ihrer Website. Vielleicht haben Sie eine Abneigung gegen Unterstreichungen. Was auch immer der Grund ist, CSS ermöglicht es uns, Links genauso zu stylen wie jedes andere Element.
Die Semantik, die HTML-Elementen innewohnt, sagt uns, wofür wir sie verwenden sollen. Brauchen Sie eine Überschrift? Sie wollen ein Überschriftenelement. Möchten Sie einen Absatz? Unser treuer Freund <p></p> ist hier, loyal wie immer. Brauchen Sie einen Download? Nun, Sie sind …
Hier sind drei aktuelle Dinge, die mir in den letzten Tagen zum Thema Buttons untergekommen sind. Erstens, ein Barrierefreiheitsfehler, der behoben werden musste. Zweitens, ein Artikel über die grundlegenden Unterschiede zwischen Links und Buttons, aber wie sie zu ähnlich aussehen können, um gut für uns zu sein. Drittens, die logische Konsequenz des Button-Elements: Verwenden Sie diese niemals außerhalb von Formularen, es sei denn, sie werden mit JavaScript injiziert.
Weltweit gehören die Medienkontroll-Icons zu den universell verständlichsten visuellen Sprachen in jeder Art von Benutzeroberfläche. Ein Designer kann einfach davon ausgehen, dass jeder Benutzer nicht nur weiß, dass ▶️ = Wiedergabe bedeutet, sondern dass Benutzer auch nach dem … suchen werden.
Ich mag diesen Beitrag von Nathan Curtis sehr, in dem er bespricht, wie Buttons auf ein Designsystem angewendet werden können
…Ich liebe Buttons. Ich kann Dinge mit Buttons machen. Einen nächsten Schritt machen. Eine Verpflichtung eingehen. Dinge erledigen.
