HTML Element - `button`

Das button-Element stellt eine interaktive Schaltfläche dar, mit der auslösbare Aktionen im Dokument umgesetzt werden können.

Beispiel

<button type="button">Ich bin ein Button</button>

Definition und Verwendung

Das button-Element definiert einen anklickbaren Button. Es sollte mit dem Attribut type versehen werden, um sein Verhalten eindeutig festzulegen.

Innerhalb eines button-Elements können sowohl Text als auch weitere HTML-Elemente eingefügt werden, zum Beispiel em, br, strong oder img.

Das button-Element kann mit CSS individuell gestaltet werden.

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Attribute-Tabelle
Attribut	Wert	Beschreibung
type	button reset submit	Gibt den Typ der Schaltfläche an.
name	eindeutiger Name	Legt einen eindeutigen Namen für die Schaltfläche fest.
autofocus	autofocus	Legt fest, dass eine Schaltfläche beim Laden der Seite automatisch den Fokus erhalten soll.
disabled	disabled	Deaktiviert die Schaltfläche.
form	form id	Gibt an, zu welchem Formular die Schaltfläche gehört.
formaction	URL	Gibt an, wohin die Formulardaten beim Absenden des Formulars gesendet werden sollen. Nur für `type`="submit".
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Legt fest, wie Formulardaten vor dem Senden an einen Server kodiert werden sollen. Nur für `type`="submit".
formmethod	get post	Legt fest, wie die Formulardaten gesendet werden sollen (welche HTTP-Methode verwendet wird). Nur für `type`="submit".
formnovalidate	formnovalidate	Gibt an, dass die Formulardaten bei der Übermittlung nicht validiert werden sollen. Nur für `type`="submit".
formtarget	_blank _self _parent _top	Legt fest, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll. Nur für `type`="submit".
popovertarget	Element-ID	Gibt an, welches Popover-Element aufgerufen werden soll.
popovertargetaction	hide show toggle	Legt fest, was mit dem Popover-Element geschieht, wenn auf die Schaltfläche geklickt wird.

Unterstützung von Global- und Event-Attribute

Es werden alle Global- und Event-Attribute vom button-Element unterstützt.

Gestaltung von Button mit CSS (Beispiele)

Webbrowser versehen button-Elemente mit unterschiedlichen Standardstilen.

Um ein einheitliches Erscheinungsbild zu erzielen, kann das Element mit CSS gezielt angepasst werden.

Beispiel : Hintergrundfarbe (background-color:)

Dieses Beispiel zeigt wie die der Standard-Button zurückgesetzt werden kann, und durch CSS ein neues Aussehen erhält.

<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 0;
background-color: transparent;
border: none;
border-radius: 0;
}

.button-1 {
font-family: sans-serif;
font-size: 16px;
padding: 5px 10px;
background-color: #20B2AA;
border: solid 1px #20B2AA;
border-radius: 12px;
}
<style>
</head>

<body>

<button type="button">Button</button>

<button  class="button-1" type="button">Button</button>

</body>
</html>

Beispiel: Rahmen (border)

Das Beispiel zeigt einen Button nur mit Rahmen ohne Hintergrundfarbe.

<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 0;
background-color: transparent;
border: none;
border-radius: 0;
}

.button-1 {
font-family: sans-serif;
font-size: 16px;
padding: 5px 10px;
border: solid 1px #20B2AA;
border-radius: 12px;
}
<style>
</head>

<body>

<button type="button">Button</button>

<button class="button-1" type="button">Button</button>

</body>
</html>

Beispiel: Wechsel von Rahmen auf Hintergrund (:hover)

Das Beispiel zeigt den Wechsel von einen Button nur mit Rahmen auf einen Button mit Hintergrundfarbe.

<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 0;
background-color: transparent;
border: none;
border-radius: 0;
}

.button-1 {
font-family: sans-serif;
font-size: 16px;
padding: 5px 10px;
border: solid 1px #20B2AA;
border-radius: 12px;
}
.button-1:hover {
background-color: #20B2AA;
}
<style>
</head>

<body>

<button type="button">Button</button>

<button class="button-1" type="button">Button</button>

</body>
</html>

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.

Diese Tabelle zeigt die Unterstützung des `button` durch gängige Webbrowser und ordnet dessen Verfügbarkeit im aktuellen Browserumfeld ein.
Element	Firefox	Internet Explorer / Edge	Safari	Chrome	Opera
`<button>`