Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

One Button to rule them all

One Button to rule them all

Manche HTML-Elemente werden eher spärlich eingesetzt und fristen ein regelrechtes Nischendasein. Dazu zählt auch das unterschätzte <button>. Stephan Zavodny schlägt eine Bresche für dieses Allroundtalent und zeigt Lösungen für grafische und nicht-grafische Buttons.

Das button-Element kommt für gewöhnlich in Formularen als Alternative zum input type="submit" zum Einsatz. Sein vorhandenes Potential bleibt dabei jedoch auf der Strecke. Die Möglichkeiten für Webentwickler sind weitaus vielfältiger.

Die Bezeichnung Button ist Programm – eine Schaltfläche, die der Nutzer anklicken kann. Es gibt drei unterschiedliche Typen: Neben type="submit" zum Abschicken eines Formulars sind type="reset" zum Zurücksetzen sowie einfach type="button" möglich. Bei letzterem wird keine Aktion ausgeführt, so dass Webworker ein individuelles Verhalten mittels JavaScript erzeugen können. Wird das type-Attribut weggelassen, funktioniert der Button standardmäßig wie ein Absendebutton, im Grunde so als wäre type="submit" gesetzt. Leider keine Regel ohne Ausnahme, denn der IE7 (und kleiner) benutzt type="button" als Grundeinstellung, wodurch der submit-Type zum Abschicken des Formulars gesetzt werden muss. Die beiden Attribute name und value sind optional.

  1. <button type="submit">Abschicken</button>

Welche Vorzüge haben Buttons?

Der Vorteil von button gegenüber input type="submit" liegt in der höheren Flexibilität. Beim input-Element können Webworker lediglich einzeiligen Text im value-Attribut hinterlegen, wohingegen button neben einfachem Text auch weitere HTML-Block- und Inline-Elemente beinhalten kann. Es fungiert dabei wie ein klickbarer Container, dessen Einzelteile sich obendrein hervorragend über CSS gestalten lassen.

  1. <button type="submit">
  2.       <strong>Geschenke versenden</strong>
  3.       <span>sponsored vom Weihnachtsmann</span>
  4.   </button>

Die zweite große Stärke des button-Elements liegt neben der Verwendung in Formularen zweifelsohne außerhalb von ihnen. Oftmals gibt es UI-Elemente, mit denen der Besucher auf einer Seite interagieren soll, beispielsweise Vor- und Zurück-Buttons bei einer Slideshow oder einem Toggle-Button, der das entsprechende Akkordeon auf- und zufahren lässt. Vielen Webworkern kommt sicherlich sofort das gute alte a-Element in den Sinn, das uns die erwartete Klickoption liefert. Bei beiden Beispielen wären a-Elemente aber semantisch fehl am Platze, da keine Anker oder Verlinkungen erzeugt werden sollen.

  1. <button type="button">mehr Informationen anzeigen</button>

Gegenüber einem semantisch neutralen Element wie dem span hat button ebenfalls die Nase vorn, da es auch mit der Tastatur angesprungen werden kann, was der Bedienbarkeit zugute kommt. Stichwort Barrierefreiheit – abgerundet wird das ganze mit der ARIA-Rolle button und dem ARIA-Attribut aria-pressed.

  1. <button type="button" role="button" aria-pressed="false">Inhalt versteckt</button>
  2. <button type="button" role="button" aria-pressed="true">Inhalt angezeigt</button>

Darüber hinaus bringt Button das Attribut disabled mit, wodurch es möglich wird, den Button zu deaktivieren. Ein typischer Anwendungsfall ist ein Registrierungsformular, das der Besucher erst abschicken können soll, nachdem er alle Pflichfelder ausgefüllt hat. Fehlt eins dieser Felder, ist der Absendebutton deaktiviert. Diese Art der Validierung übernimmt hierbei ein Javascript, dass die Eingabefelder on the fly prüft und dann das disabled-Attribut auf den Button setzt bzw. entfernt.

  1. <button type="submit" disabled="disabled">Registrieren</button>

Schönes neues HTML5!

Neben den bereits bekannten Attributen disabled, name, type und value peppt HTML5 das Element mit neuen Attributen auf, die sich sehen lassen können:

autofocus
Mittels autofocus erhält der Button den Fokus, nachdem die Seite geladen wurde. Dies ermöglicht dem Besucher, eine direkte Aktion auszuführen.
  1. <button autofocus type="submit">Einloggen</button>
form
Die Form-ID gibt an, welches Formular der Button steuern soll.
  1. <button form="id_des_zugehoerigen_formulars" type="reset">Daten zurücksetzen</button>
formaction
Dieses Attribut definiert eine URL, an die die Formulardaten geschickt werden und überschreibt damit das Form-Action-Attribut.
  1. <button formaction="http://webkrauts.de" type="submit">Registrierung abschließen</button>
formenctype
Die drei Möglichkeiten application/x-www-form-urlencoded, multipart/form-data sowie text/plain. geben an, wie die Daten enkodiert an den Server geschickt werden. Somit wird das Form-Enctype-Attribut ersetzt.
  1. <button formenctype="text/plain" type="submit">Daten übertragen</button>
formmethod
Durch die möglichen Werte post, get, put oder delete überschreibt der Button das Form-Action-Attribut Form-Method-Attribut.
  1. <button formmethod="post" type="submit">Auf der gesamten Website suchen</button>
formnovalidate
Hiermit wird die Form unvalidiert abgeschickt. Es ersetzt das Form-Novalidate-Attribut.
  1. <button formnovalidate type="submit">Gesammelte Daten abschicken</button>
formtarget
Um das Form-Target-Attribut zu überschreiben, ist es möglich durch _blank, _self, _parent oder _top zu sagen, wo die Action-URL geöffnet werden soll.
  1. <button formtarget="_blank" type="submit">Ergebnis auf neuer Seite öffnen</button>

Vom simplen Text-Button zum grafischen Bonbon

In der Vergangenheit gab es eigentlich nur eine vernünftige Art und Weise Buttons mit flexiblen Inhalten grafisch zu gestalten. Die Rede ist von der Sliding Doors Technik unter Verwendung eines Sprites. Mittlerweile steht uns Webworkern aber die weite Welt des CSS3 zu Verfügung. Schatteneffekte, Verläufe, abgerundete Ecken und vieles mehr müssen heutzutage nicht mehr über eine Pixelgrafik gelöst werden. Das Gute daran: wir sparen einen HTTP-Request und die Seite lädt schneller, spitze! Was dies im Detail bedeutet, demonstriert das folgende Beispiel.

  1. <ul class="buttons">
  2.     <li>
  3.         <button class="btn" type="button">
  4.             <span>Hinzufügen</span>
  5.         </button>
  6.     </li>
  7.  
  8.     <li>
  9.         <button class="btn" disabled="disabled" type="button">
  10.             <span>Hinzufügen</span>
  11.         </button>
  12.     </li>
  13. </ul>
  1. .buttons {
  2.     margin: 20px;
  3. }
  4.  
  5. .buttons li {
  6.     float: left;
  7.     margin-right: 5px;
  8. }
  9.  
  10. /* nervige Abstände auch im Firefox auf Null setzen */
  11. .btn::-moz-focus-inner {
  12.     border: 0;
  13.     padding: 0;
  14. }
  15.  
  16. /* das Buttonstyling */
  17. .btn {
  18.     display: inline-block;
  19.     overflow: visible;
  20.     position: relative;
  21.     height: 29px;
  22.     margin: 0;
  23.     border-radius: 4px;
  24.     border: 0;
  25.     padding: 0;
  26.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  27.     color: #000;
  28.     background-color: #bfe500;
  29.     background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
  30.     transition: background linear 0.2s;
  31.     cursor: pointer;
  32. }
  33.  
  34. /* Typodefinition */
  35. .btn span {
  36.     display: block;
  37.     position: relative;
  38.     padding: 0 12px 0 35px;
  39.     font-family: arial, helvetica, sans-serif;
  40.     font-size: 14px;
  41.     font-weight: 400;
  42.     line-height: 31px;
  43.     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  44.     white-space: nowrap;
  45. }
  46.  
  47. /* Pseudoklassen und Pseudoelemente definieren */
  48. .btn:focus,
  49. .btn:hover,
  50. .btn:active {
  51.     outline: 0 none;
  52.     background-color: #ffc600;
  53. }
  54.  
  55. .btn:active {
  56.     top: 1px;
  57.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  58. }
  59.  
  60. .btn:before,
  61. .btn span:before,
  62. .btn span:after {
  63.     position: absolute;
  64.     top: 50%;
  65.     left: 0;
  66.     content: "";
  67. }
  68.  
  69. /* Icon: grauer Kreis */
  70. .btn:before {
  71.     left: 12px;
  72.     width: 16px;
  73.     height: 16px;
  74.     margin-top: -7px;
  75.     border-radius: 16px;
  76.     box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
  77.     background: #76806c;
  78. }
  79.  
  80. /* Icon: weißer Querstrich */
  81. .btn span:before {
  82.     left: 15px;
  83.     z-index: 10;
  84.     width: 10px;
  85.     height: 2px;
  86.     margin-top: -1px;
  87.     background-color: #fff;
  88. }
  89.  
  90. /* Icon: weißer Längsstrich */
  91. .btn span:after {
  92.     left: 19px;
  93.     z-index: 10;
  94.     width: 2px;
  95.     height: 10px;
  96.     margin-top: -5px;
  97.     background-color: #fff;
  98. }
  99.  
  100. /* disabled-Status */
  101. .btn[disabled] {
  102.     opacity: 0.3;
  103.     cursor: not-allowed;
  104. }
  105.  
  106. .btn[disabled]:focus,
  107. .btn[disabled]:hover,
  108. .btn[disabled]:active {
  109.     background-color: #bfe500;
  110. }
  111.  
  112. .btn[disabled]:active {
  113.     top: 0;
  114.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  115. }

Demo auf jsfiddle.net ansehen:

Screenshot: Button

Um die Übersicht zu bewahren, kommt das Beispiel ohne die Vendor-Prefixes -webkit, -moz, -ms bzw. -o aus. Damit das Buttonstyling auch browserübergreifend den gewünschten Effekt hat, müssen wir an den nötigen Stellen – leider immer noch – auf sie zurückgreifen. Wer sich unsicher ist, ob und wo Vendor-Prefixe nötig sind, findet unter Can I Use alle nötigen Informationen. Abschließend sei noch gesagt, dass jeder, der den IE7 unterstützen will oder muss, natürlich IE-spezifische Anpassungen via Conditional Comments einbinden kann, um auch in diesem Browser ein entsprechendes Aussehen zu erreichen.

Weitere Inspiration in Sachen Button-Styling auf github:

Kommentare

Zip
am 03.12.2011 - 10:23

Ganz schön viel Code für so einen kleinen Button ;-)

Permanenter Link

Alex
am 05.12.2011 - 09:31

Abschließend sei noch gesagt, dass jeder, der den IE7 unterstützen will oder muss, natürlich IE-spezifische Anpassungen via Conditional Comments einbinden kann, um auch in diesem Browser ein entsprechendes Aussehen zu erreichen.

Der Aufwand ist nicht zu unterschätzen! Button-Styling für IE<9 ist ein Albtraum.

Permanenter Link

Moritz Gießmann
am 05.12.2011 - 10:48

Sehr schöner, umfassender Artikel.

Permanenter Link

Lukas Großberger
am 05.12.2011 - 17:14

Wunderbare Internetseite, voll mit nützlichen, gut aufbereiteten Informationen.
Danke dafür!

Ich habe eine Frage zu folgendem Absatz unter "Schönes neues HTML5 -> formmethod":

Durch die möglichen Werte post, get, put oder delete überschreibt der Button das Form-Action-Attribut.

Handelt es sich hierbei tatsächlich um das Form-Action- oder um das Form-Method-Attribut?

Permanenter Link

Stephan Zavodny
am 06.12.2011 - 10:33

Lukas, vielen Dank für das aufmerksame Lesen. Du hast natürlich Recht, es muss Form-Method-Attribut heißen. Ich habs gleich mal korrigiert.

Permanenter Link

graste
am 06.12.2011 - 10:47

Verstehe ich das richtig, dass man bei Verwendung der Form-*-Attribute Formulare steuern kann, in denen der Button nicht genested ist? D.h. ich kann einen Submitbutton irgendwo auf der Seite einfügen und ein Formular an einer ganz anderen Stelle abschicken?

Permanenter Link

Stephan Zavodny
am 06.12.2011 - 12:04

Ja, schaut man sich den derzeitigen HTML5-Editor’s Draft zum Button Element bzw. zu den Form-Controls einmal näher an, so sollte genau dies möglich sein.

Permanenter Link

Klaus
am 20.12.2011 - 09:39

Sehr ausführlich und vor allem verständlich beschrieben.

Werde ich nach den Weihnachtstagen auf meiner Website mal umsetzen.

Eine schöne Weihnachtszeit wünscht
Klaus

Permanenter Link

Daniel S
am 25.12.2011 - 22:50

Ein weiterer Vorteil, den Submitbutton via button statt input anzulegen, ist, dass sich dieser via CSS einfacher ansprechen lässt. Eingabefelder haben oft komplett andere Definition als der dazugehörige Button.

Permanenter Link

Die Kommentare sind geschlossen.