HTML: Button erstellen mit CSS – So gehts!

In HTML können kannst du einen Button mithilfe des <button>-Tags erstellen. Mit diesem Tag kannst du einen anklickbaren Buttons, der verschiedene Aktionen auslösen kann, z. B. das Senden eines Formulars, das Navigieren zu einer anderen Seite oder das Ausführen von JavaScript-Code erstellen.

HTML: Button Tag

Diesem Beispiel erzeugt einen HTML Button der vom Benutzer angeklickt werden kann

<button type="button">Hier klicken</button>

Syntax

• <button>: Dies ist das Öffnungs-Tag für das Button-Element.
• type="button": Dieses Attribut gibt den Typ des Buttons an.
• Der Wert "button" kennzeichnet einen Allzweck-Button, der standardmäßig kein Formular sendet.
• Button Text: Dies ist der Text, der im Inneren des Buttons angezeigt wird. </button>: Dies ist das Abschluss-Tag für das Button-Element.

Zusätzliche Attribute:

Du kannst bei dem <button>-Tag verschiedene Attribute hinzufügen, um sein Aussehen und Verhalten anzupassen:

• value: Legt den Wert des Buttons fest, der beim Senden eines Formulars verwendet werden kann.
• name: Gibt einen Namen für den Button an, der in Formulareingaben oder JavaScript-Code verwendet werden kann.
• disabled: Deaktiviert den Button und macht ihn für Klicks unempfindlich.
• onclick: Definiert eine JavaScript-Funktion, die ausgeführt wird, wenn der Button geklickt wird.

Ergebnis

Ein Button der ohne CSS erstellt ist.

Hier klicken

CSS: Button verschönern

Wenn du noch ein schönes Design für deinen Button mit CSS haben möchtest gehst du auf https://www.bestcssbuttongenerator.com/

Code einfügen
Erstelle dir ein Design was dir gefällt und lass dir den CSS Code dafür generieren das sieht dann so aus. Diesen Code fügst du in dein HTML Dokument ein.

Füge den CSS code in deine style.css Datei oder in den Head Bereich deiner Webseite ein.

<a class="myButton" href="#">Hier klicken</a>

<style>
.myButton {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
</style>

Ergebnis

Wie du siehtst es ist einfach einen CSS Button mit CSS zu stylen

Erklärung der CSS Syling Befehle

• background-color: Legt die Hintergrundfarbe des Buttons fest.
• color: Legt die Textfarbe des Buttons fest.
• font-size: Legt die Schriftgröße des Button-Textes fest.
• border: Definiert den Rahmenstil des Buttons.
• padding: Fügt einen Abstand um den Button-Text hinzu.
• margin: Fügt einen Rand um den Button hinzu.

Über mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite