HTML: Button erstellen mit CSS – So gehts!

Mit dem HTML Button Tag kannst du einen Button erzeugen den der Benutzer anklicken kann.

HTML: Button Tag

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

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

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>
<p>.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

Hier klicken

Hat dir der Beitrag gefallen?

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

Das könnte dich interessieren!

Weitere Kategorien