So erstellen Sie einen Button auf einer Website
Schaltflächen gehören zu den wichtigsten Elementen einer Website. Sie leiten Besucher zu konkreten Aktionen – ob Kauf, Newsletter-Anmeldung oder einfache Weiterleitung zu einer anderen Seite. Als auffälliges, interaktives Element sollen Schaltflächen ins Auge fallen und Nutzer zur Interaktion animieren. Wie erhält man am besten eine HTML-Schaltfläche für Ihre Website?
HTML-Button-Code erstellen
Die erste Lösung besteht darin, den HTML-Button-Code ganz nach Ihren Wünschen selbst zu schreiben. So erstellen Sie einen Button mit genau den Eigenschaften, die Sie benötigen. Da es Ihre eigene Kreation ist, ist Ihr Endprodukt nur durch Ihre aktuellen Programmierkenntnisse begrenzt.
Eine Schaltfläche als Widget erstellen
Alternativ verwenden Sie eine schnelle, code-freie Lösung, um einen Button im Editor zu erstellen – Sie ändern alles visuell oder geben Eigenschaften in die entsprechenden Felder ein. Der Prozess der Widget-Erstellung ist klar und intuitiv – ganz gleich, welches Programmierwissen Sie haben.
Wie erstellt man schnell einen Button mit einem Widget?
Das Elfsight Button-Widget ermöglicht dir, in wenigen einfachen Schritten einen Button zu erstellen:
- Wählen Sie eine Vorlage, um ein passendes Button-Szenario zu erhalten.
- CTA, Link und Design festlegen.
- Kopiere den generierten HTML-Code und füge ihn in deine Website ein.
Damit haben Sie in wenigen Minuten einen voll funktionsfähigen, anpassbaren Button auf Ihrer Website – ganz ohne Programmierung!
Erstellen Sie Ihre benutzerdefinierte HTML-Schaltfläche im Editor ⇩
Detaillierte Anleitung: So erstellen Sie einen Button in HTML
Mit diesen detaillierten Anleitungen erstellen Sie mühelos das Button-Widget für Ihre Webseite und steigern noch heute die Nutzerbindung.
- Positionierung anpassen. Wählen Sie im Reiter ‘Position’ die Platzierung und das Layout des Buttons. So legen Sie fest, wo der Button auf Ihrer Website erscheint und wie er angezeigt wird.
Wenn Ihr Button bereit ist, veröffentlichen Sie ihn, um im Dashboard fortzufahren. Sie sehen sofort den HTML-Code Ihres Buttons. Fügen Sie diesen Code einfach in das HTML Ihrer Website ein. Der nächste Abschnitt beschreibt im Detail, wie das geht.
Button auf jeder Website hinzufügen
Es ist ganz einfach, das Button-Widget auf jeder HTML-basierten Website hinzuzufügen. Wir werfen einen Blick auf einige Anleitungen, die den Prozess für die beliebtesten CMS-Plattformen abdecken und dabei die Besonderheiten ihres Dashboards berücksichtigen.
Button zur HTML-Website hinzufügen
Das Hinzufügen des Button-Widgets zu einer bestimmten Seite Ihrer HTML-Website ist einfach. Fügen Sie einfach den von Elfsight erstellten Code an der gewünschten Stelle ein.
- Greifen Sie auf das Backend Ihrer Website zu. Stellen Sie sicher, dass Sie den HTML-Code im Admin-Bereich bearbeiten können, um das Widget nahtlos zu integrieren.
- Den Berechnungs-Code einfügen. Wählen Sie den Ort auf Ihrer Website, an dem das Widget erscheinen soll, und fügen Sie den HTML-Code Ihres Buttons hinzu.
- Änderungen speichern. Prüfen Sie, ob alles wie erwartet funktioniert und auf der Seite konsistent aussieht.
Schaltfläche zur WordPress-Website hinzufügen
No-Code-Widget schnell in Ihre Website einbetten, indem Sie den bereitgestellten Code in einen Block einfügen. So erscheint Ihre Schaltfläche genau an der Stelle, die Sie benötigen.
- Melden Sie sich bei Ihrem WordPress-Konto an. Sie müssen im Admin-Bereich arbeiten, um Änderungen am HTML-Code vorzunehmen.
- Gehen Sie zu „Seiten“ und wählen Sie die gewünschte Seite aus. Berücksichtigen Sie Ihre Geschäftsziele und Ihre Gründe für das Einbetten des Plugins in einen bestimmten Bereich.
- Fügen Sie einen benutzerdefinierten HTML-Block hinzu. Er muss im vorgesehenen Bereich der Website erscheinen, in den Sie den Button eingebettet haben.
- Fügen Sie den generierten Code in diesen Block ein. Vergessen Sie nicht, die Seite zu „Aktualisieren“ und die Funktionsweise des Widgets zu überprüfen.
Button in WordPress erstellen →
Wix-Website-Schaltfläche hinzufügen
Das Hinzufügen des Widget-Codes zusammen mit Ihrem HTML-Button zu einer erforderlichen Wix-Seite ist einfach. Der von Elfsight bereitgestellte benutzerdefinierte Code fügt sich nahtlos in den gewünschten Bereich der Seiten ein.
- Greifen Sie auf den Wix-Editor zu. Loggen Sie sich in Ihr Wix-Konto ein und wählen Sie die Website aus, die Sie bearbeiten möchten. Öffnen Sie das Dashboard Ihrer Website und klicken Sie auf „Site bearbeiten“, um den Editor zu öffnen.
- Einen HTML-Block für das Widget hinzufügen. Klicken Sie auf das Plus-Symbol im linken Menü und navigieren Sie zum Abschnitt Einbetten. Unter dem Tab ‘Benutzerdefinierte Einbettungen’ wählen Sie ‘Ein Widget einbetten’, um Ihrer Seite einen neuen HTML-Block hinzuzufügen.
- Fügen Sie den HTML-Code des Button-Widgets ein. Klicken Sie auf „Code eingeben“ und fügen Sie den Installationscode aus dem Button-Widget-Editor ein. Nachdem Sie den Code eingefügt haben, klicken Sie auf „Aktualisieren“, um das Widget in Ihre Seite einzubetten.
- Passen Sie die Abmessungen und die Platzierung des Widgets an. Passen Sie Größe und Position des Widgets auf der Seite an. Stellen Sie sicher, dass es perfekt passt und optisch überzeugt, indem Sie Größe und Position sorgfältig festlegen.
- Für mobile Geräte optimieren. Wechseln Sie zum mobilen Editor und passen Sie das Widget nach Bedarf an. Stellen Sie sicher, dass das Widget auf Mobilgeräten gut aussieht, und veröffentlichen Sie Ihre Änderungen, sobald das Layout Ihnen gefällt.
Schaltfläche in Wix erstellen →
Schaltfläche zur Shopify-Website hinzufügen
Fügen Sie den HTML-Button schnell zu jeder Seite Ihrer Shopify-Website hinzu. Sie müssen lediglich den vorgefertigten Code von Elfsight an einer vorgesehenen Stelle Ihrer Website einfügen.
- Gehen Sie zum Shopify-Admin-Bereich. Sie müssen den Bereich „Online Store“ der Website finden.
- Wählen Sie im Dropdown-Menü ‘Anpassen’. Danach wählen Sie im linken Menü ‘Abschnitt hinzufügen’.
- Unter ‘Benutzerdefinierte Inhalte’ auf ‘Hinzufügen’ klicken. Sie müssen die vorinstallierten Shopify-Elemente entfernen.
- Wählen Sie „Benutzerdefiniertes HTML“. Es ist die Option, die Sie im Menü „Inhalt hinzufügen“ finden.
- Rufen Sie den Abschnitt ‘HTML’ auf. Hier können Sie den Installationscode des Formulars einbetten und alle Änderungen speichern.
Schaltfläche in Shopify erstellen→
Schaltfläche zur Squarespace-Website hinzufügen
Jeder kann den anpassbaren Button schnell auf der gewünschten Seite einer Squarespace-Website einbetten. Gib einfach den von Elfsight generierten Code in einen speziellen Block der Seite ein.
- Melden Sie sich bei Ihrem Squarespace-Konto an. Melden Sie sich bei Ihrem Squarespace-Konto an und wählen Sie die Website für das Widget aus. Navigieren Sie zum Dashboard Ihrer Website und wählen Sie die Website aus, die Sie bearbeiten möchten.
- Gehe zum Abschnitt Website. Wähle die Seite aus, auf der du das Formular-Widget hinzufügen möchtest. Öffne im Hauptmenü den Abschnitt Website und wähle die gewünschte Seite.
- Wählen Sie ‚Bearbeiten‘ und anschließend ‚Abschnitt hinzufügen‘. Klicken Sie auf der ausgewählten Seite auf ‚Bearbeiten‘ und wählen Sie dann ‚Abschnitt hinzufügen‘, wo das Widget funktionieren soll. So erstellen Sie einen neuen Bereich auf Ihrer Seite für das Widget.
- Füge einen Code-Block hinzu. Wähle ‘Einen leeren Abschnitt hinzufügen’, klicke dann auf ‘Block hinzufügen’ und wähle aus der Liste ‘Code’. Hier fügst du den Widget-Code deines Buttons ein.
- Installationscode des Widgets einfügen. Im Bearbeiten-Symbol fügst du den Installationscode des Button-Widgets ein und passt die Breite des Blocks an. Stelle sicher, dass das Widget gut platziert aussieht und optisch ansprechend auf deiner Seite wirkt.
Button in Squarespace erstellen→
Button zur Webflow-Website hinzufügen
Das Hinzufügen des Widgets zu Webflow-Seiten klappt reibungslos, da Sie lediglich ein Embed-Element hinzufügen müssen, in dem Sie den generierten HTML-Code Ihres Buttons einfügen.
- Starten Sie in Webflow. Melden Sie sich bei Ihrem Webflow-Konto an und wählen Sie die Website aus, in der Sie das Widget einbetten möchten.
- Widget einbetten. Im Webflow-Editor klicken Sie auf das Plus-Symbol. Ziehen Sie anschließend das Embed-Element aus dem linken Menü an die Stelle, an der der Button angezeigt werden soll.
- Code einfügen. Fügen Sie den Installationscode des Formulars in den erscheinenden HTML-Einbettungscode-Editor ein. Danach klicken Sie auf „Speichern & Schließen.“
- Anpassung und Veröffentlichung. Passen Sie die Einstellungen Ihres Buttons an, klicken Sie anschließend auf Veröffentlichen und wählen Sie die Domains aus, auf denen er aktiv sein soll.
Schaltfläche in Webflow erstellen→
Button zur Elementor-Website hinzufügen
Die Integration des Button-Widgets in Elementor ist einfach und bequem. Sie benötigen lediglich einen leeren Block auf Ihrer Seite, in den Sie den Widget-Code einfügen.
- Starten Sie im WordPress-Backend. Melden Sie sich im Backend Ihrer WordPress-Website an, gehen Sie zu ‘Seiten’ und wählen Sie die Seite aus, auf der Sie das Button-Widget hinzufügen möchten.
- Elementor-Bearbeitung starten. Wählen Sie ‘Mit Elementor bearbeiten’, um Ihre gewählte Seite anzupassen.
- Das HTML-Element implementieren. Verwenden Sie die Drag-and-Drop-Funktion, um das HTML-Element auf Ihrer Seite zu platzieren.
- Fügen Sie den Widget-Code in Ihre Website ein. Fügen Sie den HTML-Code des Buttons von Elfsight in das HTML-Code-Feld ein.
- Aktualisieren und genießen. Klicken Sie auf Aktualisieren, um Ihre Änderungen anzuwenden und Ihre Seite dank des eingebetteten Buttons zu sehen.
Button in Elementor erstellen→
So erstellen Sie eine Schaltfläche mit HTML-Code
Erfahren Sie, wie Sie einen Button in HTML erstellen – ganz ohne Drittanbieter-Tools. Wenn Sie HTML-Grundkenntnisse haben, können Sie bestimmte Parameter dieses Buttons anpassen und der kurzen Anleitung nach diesem Code folgen, um den gewünschten Link einzufügen.
Button ExampleSo funktioniert es
- Der Button verwendet einfaches HTML für Struktur und CSS für die grundlegende Gestaltung.
- Sie können das Erscheinungsbild des Buttons mit der .cta-button-Klasse anpassen (Hintergrundfarbe, Größe, Schriftart usw.).
- Das onclick-Ereignis löst eine Weiterleitung zu dem angegebenen Link aus. Benutzer können ‘https://your-cta-link.com’ durch ihre eigene URL ersetzen (den Link, zu dem Besucher weitergeleitet werden sollen).
Beispiele für Button-Widgets auf Websites
Elfsight bietet eine breite Palette vorkonfigurierter Button-Vorlagen, die Sie an das Design Ihrer Website anpassen können, damit sie zu Ihrem Branding passt und alle anderen Elemente in den Hintergrund rücken. Ob minimalistischer Stil, kräftige, lebendige Farben oder ein elegantes, professionelles Design – es gibt immer eine Option, die Ihr Branding optimal präsentiert und einzigartige Funktionen hervorhebt. Werfen Sie einen Blick darauf:
Beispiel 1: Jetzt kaufen-Button
Das Shop Now-Widget-Template ist ideal für E-Commerce-Unternehmen. Es besticht durch ein mutiges, auffälliges Design mit einer CTA-Überschrift, die Besucher mit einem Klick zu Ihrem Online-Shop weiterleitet. Dieses Template erzeugt Dringlichkeit und ermutigt potenzielle Kunden dazu, Ihre Produkte zu entdecken und einen Kauf zu tätigen.
Beispiel 2: Folgen-Button auf Instagram
Für Unternehmen, die ihre Instagram-Präsenz ausbauen möchten, ist die Vorlage ‘Follow on Instagram’ eine ausgezeichnete Wahl. Sie integriert den Instagram-Benutzernamen und lädt Besucher ein, Ihrem Konto direkt von Ihrer Website aus zu folgen. Diese Vorlage hilft, Ihre Followerzahl zu erhöhen und die Reichweite Ihrer Marke in den sozialen Medien zu vergrößern.
Beispiel 3: Folgen-Button auf Facebook
Mit der Vorlage ‘Folge auf Facebook’ können Sie sich mit Ihren Website-Besuchern auf der weltgrößten Social-Media-Plattform verbinden. Diese Vorlage zeigt die CTA-Nachricht und ermutigt Besucher, Ihre Seite zu liken und zu folgen, sodass Sie eine treue Community aufbauen und sie mit Ihrer Marke engagiert halten können.
Beispiel 4: Pinterest-Follow-Button
Das ‚Follow on Pinterest‘-Template ist ideal für Unternehmen, die visuelles Storytelling und Inspiration in den Mittelpunkt stellen. Es verwendet eine erkennbare Pinterest-Schriftart und lädt Website-Besucher dazu ein, Ihre Boards zu erkunden und Ihrer Marke zu folgen. Dieses Template hilft, Traffic zu Ihrem Konto zu lenken und die Markenbekanntheit zu steigern.
Beispiel 5: E-Mail-Button
Die Vorlage Email Us vereinfacht den Kontakt zu Ihrem Unternehmen. Sie verfügt über ein minimalistisches Button-Design und ermutigt Besucher dazu, direkt von Ihrer Website aus eine E-Mail zu verfassen. Diese Vorlage verbessert das Nutzererlebnis, indem sie eine schnelle und bequeme Möglichkeit bietet, Anfragen oder Wünsche zu äußern.
Beispiel 6: TikTok-Folgen-Button
Da TikTok weiter an Beliebtheit gewinnt, können Unternehmen die ‘Follow on TikTok‘-Schaltflächenvorlage nutzen, um diese lebendige Social-Media-Plattform zu erschließen. Mit einem Branding-Element – einem knalligen Pink-Ton – lädt diese Vorlage Besucher ein, Ihrem TikTok-Konto zu folgen, damit Sie ansprechende Video-Inhalte teilen und mit einem jüngeren, hochengagierten Publikum in Kontakt treten.
Beispiel 7: Chat über WhatsApp-Schaltfläche
Mit der Button-Vorlage Chat über WhatsApp können Sie Echtzeit-Kundensupport und Gespräche anbieten. Diese Vorlage enthält das grüne Farbschema und den CTA-Text, um Website-Besucher dazu zu ermutigen, einen Chat über die WhatsApp-Nachrichten-App zu starten. Diese Vorlage fördert direkte Kommunikation, um potenzielle Kunden persönlich zu unterstützen.
Beispiel 8: Twitter-Follow-Button
Die Vorlage „Twitter folgen“ kann Ihnen helfen, Ihre Twitter-Präsenz zu stärken. Sie fordert Besucher dazu auf, Ihrem Twitter-Konto über eine direkte CTA-Nachricht zu folgen. Dadurch wächst Ihre Followerzahl, stärkt die Markenbekanntheit und fördert das Engagement durch Tweets und Gespräche.
Beispiel 9: Chat per Skype-Button
Die Vorlage Chat via Skype-Schaltfläche ist eine ausgezeichnete Option für Unternehmen, die Text- oder Video-Chats bevorzugen. Sie enthält den CTA-Text, der Website-Nutzern dazu einlädt, einen Chat oder Anruf über Skype zu starten. Sie ermöglicht direkte Kommunikation und personalisierte Interaktion und verbessert das Kundenerlebnis und stärkt das Vertrauen.
Beispiel 10: Rückruf-Button
Die ‘Call Us’-Vorlage vereinfacht den Kontakt zu Ihrem Unternehmen per Telefon. Sie zeigt ein Telefon-Icon und regt Besucher dazu an, Ihr Unternehmen direkt von Ihrer Website aus anzurufen. Sie bietet eine bequeme und unmittelbare Kommunikationsmöglichkeit, damit potenzielle Kunden schnell Informationen einholen oder Unklarheiten klären können.
Mit dem HTML-Code-freien Button-Widget erstellen Sie auffällige Call-to-Action-Buttons, die Besucher Ihrer Website ansprechen und zu konkreten Handlungen führen. Von E-Commerce bis Social-Media-Engagement, Kommunikation und mehr – jede Vorlage bietet eine einzigartige Chance, zu verbinden, zu konvertieren und das Nutzererlebnis zu verbessern. Wählen Sie diejenige aus, die Ihren Zielen entspricht!
Mehr als 35 Button-Vorlagen entdecken
Tipps zur Website-Button-Nutzung
Um das volle Potenzial der Buttons auf Ihrer Website auszuschöpfen, reicht es nicht, sie nur auf einer Seite zu platzieren. Indem Sie sich auf einige zentrale Elemente wie Design, Formulierungen und Positionierung konzentrieren, erhöhen Sie deren Wirksamkeit deutlich und steigern die Nutzerinteraktion.
- 📌 Verwenden Sie klare und handlungsorientierte Texte. Der Text auf Ihrem Button sollte knapp sein und genau vermitteln, was der Nutzer tun soll. Formulierungen wie „Jetzt starten“, „Jetzt registrieren“ oder „Mehr erfahren“ sind effektiv, weil sie direkt und handlungsorientiert sind. Vermeiden Sie vage Formulierungen wie „Hier klicken.“
- 📌 Mit kontrastierenden Farben zum Hingucker machen. Ihr Button sollte visuell auf der Seite hervorstechen und von Nutzern sofort erkannt werden. Verwenden Sie Farben, die sich vom Hintergrund Ihrer Website abheben und gleichzeitig zur Markenpalette passen. Der Text muss gut lesbar sein.
- Der Ort ist der Schlüssel, wenn es um Buttons geht. Stellen Sie sicher, dass es dort platziert ist, wo der Benutzer am ehesten eine Aktion ausführt, z. B. nahe wichtiger Informationen. Ziehen Sie in Erwägung, es oberhalb des Falzes zu platzieren oder nach detaillierten Informationen mit einem weiteren Button fortzufahren, um Interesse zu wecken, sobald der Nutzer bereit ist zu handeln.
Abschließend sind Buttons ein starkes Instrument, um Benutzeraktionen zu lenken und Conversions auf Ihrer Website zu steigern. Wenn Sie diese Tipps befolgen — klare Texte verwenden, Ihren Button hervorheben und ihn strategisch positionieren — können Sie Ihre Conversions deutlich verbessern.
Fazit
Jetzt wissen Sie, wie Sie einen funktionsfähigen Button in Ihre Website einbetten, um Aktionen zu ermöglichen, die Ihr Geschäft benötigt. Lenken Sie die Aufmerksamkeit auf Ihre Produkte, bitten Sie um eine Bewertung und laden Sie Besucher ein, Ihnen in Ihren sozialen Netzwerken zu folgen. Das Button-Widget ist einfach, aber seine Einsatzmöglichkeiten sind grenzenlos.
Sie können sicher sein, dass der Button auf jedem Website-Builder oder CMS attraktiv aussieht und perfekt funktioniert.
FAQ (Häufig gestellte Fragen)
Ist das Button-Widget kostenlos?
Kann ich das Button-Widget für verschiedene Call-to-Actions verwenden?
Was ist ein Call-to-Action-Button auf einer Website?
Wie zentriert man einen Button in HTML?
Weitere Ideen, um Ihre Website zu stärken
- Mit Zahlen? Probieren Sie Elfsight’s Calculator Widget. Mit zahlreichen Berechnungsfeldern, einfachem Builder und KI-Funktion zur automatischen Generierung von Taschenrechnern können Sie eine perfekte Lösung für Ihre Kunden erstellen, die den Nutzen Ihres Angebots messen möchten.
- All-in-One Reviews widget. Use your website to display customer reviews from your audiences on any platform.”>Möchten Sie mehr Feedback erhalten? Fügen Sie Rezensionen von Amazon, Facebook, Yelp und über 30 weitere Anbieter in unser All-in-One-Bewertungen-Widget ein. Nutzen Sie Ihre Website, um Kundenbewertungen aus Ihrem Publikum plattformübergreifend anzuzeigen.
Oder werfen Sie einfach einen Blick auf alle Widgets, die Elfsight entwickelt hat, um E-Commerce, Social-Media-Aktivitäten und Website-Management zu vereinfachen.
Haben Sie eine Frage?
Wir hoffen, dieser Leitfaden war hilfreich. Kontaktieren Sie uns, falls Sie weitere Informationen zum Einbetten eines Website-Buttons benötigen oder Unterstützung benötigen. Wir sind hier, damit Ihre Erfahrung reibungslos und erfolgreich verläuft. Elfsight bietet eine komplette Ohne-Code-Lösung für Ihre Website-Bedürfnisse. Wir sind außerdem eine lebendige Community, in der Ideen und Fachwissen zusammenkommen, also zögern Sie nicht, Ihre kreativen Vorschläge in unserer Wunschliste zu teilen!
