So betten Sie ein Bild in eine Schaltfläche in HTML ein

Um ein Bild in eine HTML-Schaltfläche einzufügen, verschachteln Sie ein <img> in einem <button>. Dies ist die übliche Wahl für eine Aktion wie das Öffnen eines Menüs oder das Speichern einer Änderung. Verwenden Sie <input type="image">, wenn das Bild ein Formular absenden soll. Die Steuerelemente haben unterschiedliche Zwecke: type="image" ist kein gültiger Typ für <button>.

Die Beispiele zeigen Markup und CSS. Die mitgelieferte Laufzeit rendert keine Browserseite, daher gibt das erste Beispiel Markup aus, das Sie in eine Seite einfügen können; es beansprucht kein visuelles Ergebnis.

Einem nativen HTML-Button ein Bild hinzufügen

Verwenden Sie für eine gewöhnliche Aktion einen nativen <button> mit einem darin enthaltenen <img>. Das folgende kleine JavaScript-Beispiel gibt ein Schaltflächenelement mit einer im Paket enthaltenen Bildressource aus. Das Bild ist dekorativ, da die Schaltfläche einen eigenen zugänglichen Namen hat.

const button = '<button type="button" aria-label="Save"><img src="button-image.webp" alt=""></button>';
console.log(button);

<button type="button" aria-label="Save"><img src="button-image.webp" alt=""></button>

Der Wert von src ist ein relativer Pfad zu einem Bild in diesem Artikelpaket. Ersetzen Sie ihn durch den Pfad zu Ihrem eigenen Bild, wenn Sie das Beispiel anpassen. type="button" ist innerhalb eines Formulars wichtig: Ohne ausdrücklichen Typ sendet eine Schaltfläche normalerweise das zugehörige Formular ab. Wenn das Bild selbst die Aktion vermittelt und es keine andere Beschriftung gibt, geben Sie ihm einen aussagekräftigen Alternativtext, etwa <img src="button-image.webp" alt="Save">, und lassen Sie das aria-label weg. Wenn sichtbarer Text die Aktion bereits benennt, verhindert ein leeres alt, dass ein überflüssiges Bild diesen Namen wiederholt. Vermeiden Sie es, dem Bild und der Schaltfläche dieselbe zugängliche Beschriftung zu geben.

Eine native Schaltfläche bietet Aktivierung per Tastatur und Fokusverhalten. Behalten Sie bei benutzerdefinierten Stilen eine sichtbare Fokusanzeige bei, damit Tastaturbenutzer erkennen können, welches Steuerelement aktiv ist.

Ein Image-Input zum Absenden von Formularen verwenden

Wählen Sie <input type="image">, wenn die Aktivierung des Bildes das zugehörige Formular absenden soll. Anders als eine native Schaltfläche mit verschachteltem Bild ist dies selbst ein Absende-Steuerelement und enthält kein verschachteltes <img>. Sein src verweist auf das Bild, und sein alt-Wert benennt das Steuerelement. Beispielsweise sendet das Inline-Formular <form action="/search" method="get"><label for="query">Search</label><input id="query" name="q"><input type="image" src="button-image.webp" alt="Search"></form> eine Suchanfrage, wenn das Bild-Steuerelement aktiviert wird. Passen Sie das Ziel des Formulars und den Bildpfad an Ihre Seite an.

Ein Image-Input nimmt an der Formularübermittlung und der Gültigkeitsprüfung teil. Bei der Aktivierung übermitteln Browser außerdem die Klickkoordinaten unter dem Namen des Steuerelements, gefolgt von .x und .y; fügen Sie einen name hinzu, wenn der Server diese Werte benötigt. action und method des Formulars legen das Standardziel und die Standard-Anfragemethode fest. formaction und formmethod am Image-Input können diese Standardwerte für diese Übermittlung überschreiben. Verwenden Sie einen Image-Input für eine Formularaktion, nicht als Ersatz für eine allgemeine Oberflächen-Schaltfläche.

Einen Bild-Button gestalten und dimensionieren

Wenden Sie eine Klasse auf die native Schaltfläche an und dimensionieren Sie dann das darin verschachtelte Bild. Eine rahmenlose Symbol-Schaltfläche kann padding: 0; border: 0; background: transparent; verwenden, während das Bild display: block; width: 2rem; height: 2rem; object-fit: contain; verwenden kann. Diese CSS-Deklarationen sind Inline-Syntaxbeispiele; fügen Sie sie in ein Stylesheet oder ein <style>-Element Ihrer Seite ein. Wählen Sie Abmessungen, die zu den umgebenden Steuerelementen passen. object-fit: contain hält das gesamte Bild in seiner Box sichtbar. Verwenden Sie für ein flexibles Bild max-width: 100%; height: auto;, damit es schrumpfen kann, während seine Proportionen erhalten bleiben.

Stellen Sie Hover-Rückmeldungen bereit und behalten Sie einen Tastatur-Fokusstil bei, etwa mit button:hover und button:focus-visible. Ein Hintergrund, ein Rahmen oder Innenabstand kann ein Steuerelement aus Text und Bild leichter als interaktiv erkennbar machen. Entfernen Sie den Umriss des Browsers nicht, es sei denn, Sie stellen eine ähnlich klare Fokushervorhebung bereit. Ein Image-Input kann ebenfalls über CSS dimensioniert werden, aber die Regel gilt für dieses Input-Element und nicht für ein verschachteltes Bild.

Bild- und Formularattribute wählen

Verwenden Sie src für die Bilddatei und alt für ihren zugänglichen Namen oder einen leeren Wert, wenn das Bild keine Information über sichtbaren Text oder eine andere zugängliche Beschriftung hinaus hinzufügt. Setzen Sie width und height auf die vorgesehenen Bildabmessungen, wenn sie bekannt sind; sie reservieren Layoutplatz, während CSS die gerenderte Größe für schmalere Layouts anpassen kann. Wählen Sie für ein nützliches Symbol, dessen Aktion nirgendwo sonst angegeben ist, einen Alternativtext, der die Aktion oder den Zweck genau beschreibt.

Beim <input type="image"> kann das Attribut form das Steuerelement über die ID dieses Formulars mit einem Formular an anderer Stelle im Dokument verknüpfen. formaction, formmethod, formenctype, formnovalidate und formtarget überschreiben die entsprechenden Formulareinstellungen für dieses Absende-Steuerelement. Verwenden Sie eine Überschreibung nur, wenn dieser Image-Input ein anderes Übermittlungsverhalten benötigt. Diese Formularattribute machen einen nativen <button> nicht zu einem Image-Input, und sie gelten nicht für das verschachtelte <img> eines Buttons.