CTA-Button-Generator
Entwerfen Sie einen CTA-Link für eine Website, sehen Sie sich eine Vorschau der Farben und der Größe an, überprüfen Sie den Textkontrast und kopieren oder laden Sie den fehlerfreien HTML- und CSS-Code herunter.
Details und Stil der CTA
Geben Sie das Ziel und die angezeigte Bezeichnung ein und wählen Sie anschließend die gewünschten Schaltflächenstile für Ihre Website aus.
CTA-Vorschau und Code
Überprüfen Sie vor der Veröffentlichung den sichtbaren Link, den Zielhost, den Kontrast, den Fokusstil und das generierte Markup.
So erstellen Sie einen CTA für eine Website
Verwenden Sie gut sichtbaren Text, der den Besuchern vermittelt, was sie erwartet, beispielsweise “Angebot anfordern” oder “Produktspezifikationen anzeigen”.”
Bestätigen Sie die endgültige URL, die Standard- und Hover-Farben, die Schaltflächengröße, den barrierefreien Namen und den Stil des Tastaturfokus.
Fügen Sie den HTML- und CSS-Code in Ihre Website ein und testen Sie anschließend den tatsächlichen Link mit einer Tastatur, einem Screenreader, einem Smartphone und einem Desktop-Browser.
Hinweise zu Code, Kontrast und Barrierefreiheit
Der Generator erstellt einen formatierten Anker, da dieser CTA eine Ziel-URL öffnet. Schaltflächentext, barrierefreie Beschriftungen, Klassennamen und URLs werden überprüft und mit Escape-Zeichen versehen. Es werden nur vollständige HTTP- oder HTTPS-Ziele akzeptiert. Beim Öffnen eines neuen Tabs werden automatisch die Attribute `noopener noreferrer` hinzugefügt; das Attribut `nofollow` wird nur hinzugefügt, wenn es ausgewählt wurde.
Die Kontrastberechnung erfolgt nach der WCAG 2.2-Formel für die relative Leuchtdichte. Die Voreinstellungen „Kompakt“ und „Standard“ verwenden die AA-Textreferenz mit einem Verhältnis von 4,5:1. Die Voreinstellung „Groß“ verwendet die 3:1-Referenz für Großtext, wenn die Schriftstärke 700 oder 800 beträgt; bei Großtext mit einer Schriftstärke von 600 wird weiterhin das Verhältnis 4,5:1 verwendet. Überprüfen Sie sowohl die Standard- als auch die Hover-Farben. Dieser Test umfasst ausschließlich die Textfarben von CTA-Elementen, nicht jedoch die Sichtbarkeit im Fokus, das umgebende Layout, den Zoom, die Touch-Größe, den Zweck von Links oder die Barrierefreiheit der gesamten Seite.
W3C: Kontrast (Mindestanforderungen) verstehenDatenverarbeitung: Ihre CTA-Details, die Vorschau, der generierte Code, die Kopien in der Zwischenablage und der Download verbleiben in Ihrem Browser. Nichts, was Sie hier eingeben, wird von diesem Tool hochgeladen oder gespeichert.
Kampagneninhalte in eine vernetzte Marktpräsenz verwandeln
Entdecken Sie die Dienstleistungen von TradeGoAI zur Erstellung aussagekräftigerer Vertriebsinhalte, zur Organisation marktreifer Inhalte und zur Steigerung Ihrer Sichtbarkeit auf internationalen Märkten.
Häufig gestellte Fragen
Erzeugt dieser Generator einen Link oder eine Formularschaltfläche?
Es wird ein Anker-Link erstellt, der wie eine Call-to-Action-Schaltfläche gestaltet ist. Verwenden Sie diesen, wenn durch Klicken auf die CTA eine andere Seite geöffnet werden soll. Verwenden Sie ein echtes Schaltflächenelement für Aktionen wie das Absenden eines Formulars, das Öffnen eines Dialogfelds oder das Ändern der aktuellen Benutzeroberfläche.
Welche Ziel-URLs werden akzeptiert?
Das Ziel muss eine vollständige HTTP- oder HTTPS-URL sein. URLs, die JavaScript, Daten, Dateien, relative Pfade oder Anmeldedaten enthalten, werden abgelehnt. Überprüfen Sie das endgültige Ziel und die Tracking-Parameter, bevor Sie den CTA veröffentlichen.
Was bedeutet das Kontrastergebnis?
Das Ergebnis vergleicht die ausgewählte Textfarbe sowohl mit dem Standardhintergrund als auch mit dem Hintergrund beim Hover. Dabei wird der WCAG 2.2 AA-Referenzwert von 4,5:1 für normalen Text bzw. 3:1 für die Voreinstellung „groß“ bei einer Schriftstärke von 700 oder 800 verwendet. Das Bestehen dieser Farbprüfung allein ist noch kein Beweis dafür, dass eine gesamte Seite barrierefrei ist.
Wann sollte ich eine Barrierefreiheits-Kennzeichnung hinzufügen?
Verwenden Sie das optionale barrierefreie Label nur dann, wenn der sichtbare CTA-Text das Ziel nicht eindeutig beschreibt. Geben Sie dem klaren, sichtbaren Text den Vorrang. Das generierte „aria-label“ ersetzt den sichtbaren Text als Linknamen für assistive Technologien und muss daher denselben Zweck beschreiben.
Werden meine CTA-Daten hochgeladen oder gespeichert?
Nein. Die Validierung, die Vorschau, die Kontrastberechnung, die Code-Erstellung, das Kopieren und der Download erfolgen in Ihrem Browser. TradeGoAI empfängt oder speichert die in diesem Tool eingegebenen Inhalte nicht.