Ein HTML-Button ist ein interaktives Element auf einer Webseite, das es Benutzern ermöglicht, Aktionen auszuführen oder Formulare zu senden. Ein Button kann Text, Bilder oder beides enthalten und wird häufig verwendet, um eine Aktion wie das Absenden eines Formulars, das Starten einer Suche oder das Ausführen einer bestimmten Funktion auf der Webseite auszulösen.
Ein Button wird in HTML mit dem <button>-Tag erstellt. Es gibt auch die Möglichkeit, Buttons mit dem <input>-Tag zu erstellen, aber für diese Erklärung verwenden wir das <button>-Tag.
Hier ist ein grundlegendes Beispiel für einen HTML-Button:
<!DOCTYPE html>
<html>
<head>
<title>Button in einem Formular</title>
</head>
<body>
<h1>Ein Formular mit einem Button</h1>
<form>
<input type="text" name="benutzername" placeholder="Benutzername">
<button type="submit">Absenden</button>
</form>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
In diesem Beispiel wird ein einfacher Button erstellt, der den Text “Ich bin ein Button” enthält.
Der Button ist standardmäßig klickbar, und wenn ein Benutzer darauf klickt, kann er eine Aktion auslösen. Die Art der Aktion hängt von der Verwendung des Buttons und der JavaScript-Logik auf der Webseite ab.
Wenn Sie möchten, dass der Button eine spezifische Aktion ausführt, wenn er geklickt wird, können Sie dem Button das onclick-Attribut hinzufügen und JavaScript-Code angeben, der ausgeführt werden soll. Hier ist ein Beispiel, bei dem der Button eine einfache Meldung ausgibt, wenn er geklickt wird:
<!DOCTYPE html>
<html>
<head>
<title>Button Beispiel mit JavaScript</title>
</head>
<body>
<h1>Ein Button mit Aktion</h1>
<button onclick="alert('Button wurde geklickt!')">Klick mich!</button>
</body>
</html>
Sind Sie an weiteren Beispielen für html button interessiert? Dann schreiben Sie uns gerne.
Für weiterführende Infos wird man hier fündig.
