{"id":1388,"date":"2026-05-29T06:00:44","date_gmt":"2026-05-29T06:00:44","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&p=1388"},"modified":"2026-05-29T21:20:55","modified_gmt":"2026-05-29T21:20:55","password":"","slug":"buttons","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Anwendung<\/h2>

Entscheide, wie die Buttons in deinem Theme aussehen. Angepasst werden der prim\u00e4re und der sekund\u00e4re Button. Diese kannst du sehr leicht und super pr\u00e4zise mit dem Theme Builder gestalten. Wir zeigen dir hier Schritt f\u00fcr Schritt, wie die Einstellungen unter \u201eButtons\u201c funktionieren.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Button \u00dcbersicht finden<\/h2>

Um deine Buttons anzupassen, klicke auf den sechsten Punkt \u201eButtons\u201c.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Schriften<\/div>\n
W\u00e4hle Buttons aus, um weitere Einstellungen zu sehen.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Buttons \u00dcbersicht<\/h2>

In der Buttons \u00dcbersicht findest du an erster Stelle all deine bestehenden Hintergr\u00fcnde. An zweiter Stelle findest du die Einstellungen f\u00fcr die prim\u00e4ren und sekund\u00e4ren Buttons.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Hintergrund Auswahl<\/div>\n
Klicke auf einen deiner bestehenden Hintergr\u00fcnde, um die prim\u00e4ren und sekund\u00e4ren Buttons an diesen Hintergrund anzupassen.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Buttons Einstellungen<\/div>\n
Die Buttons-\u00dcbersicht besteht aus den prim\u00e4ren und sekund\u00e4ren Buttons. Welche Anpassungsm\u00f6glichkeiten sich dahinter verbergen, schauen wir uns im n\u00e4chsten Schritt an.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Option 1 –\u00a0 Fl\u00e4chige Buttons<\/h2>

Nach dem du den Hintergrund an dem du die buttons anpassen m\u00f6chtest gew\u00e4hlt hast, klicke auf \u201ePrim\u00e4r\u201c, um die prim\u00e4ren Buttons anzupassen.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Button Typ<\/div>\n
Dir stehen drei M\u00f6glichkeiten zur Verf\u00fcgung, um den perfekten Button Typen zu finden. Du kannst zwischen Fl\u00e4chen Button, Kontur oder Ghost w\u00e4hlen.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Standart und Hover States<\/div>\n
Zus\u00e4tzlich kannst du die States deiner Buttons anpassen: den Standard und den Hover State.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 1 –\u00a0 Standard State des fl\u00e4chigen Buttons anpassen<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Button Farbe<\/div>\n
Wenn du den fl\u00e4chigen Button gew\u00e4hlt hast, passe die Farbe des Buttons mit dem Farben Picker an.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Kontur<\/div>\n
Entscheide, ob dein prim\u00e4rer Button eine Kontur hat oder nicht. Wenn ja, vergebe diese wieder mit dem Farben-Picker und stelle die St\u00e4rke der Kontur ein.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Eckenradius<\/div>\n
Entscheide, welchen Eckenradius dein prim\u00e4rer Button bekommt. Du kannst einen Wert von 0 bis 3 einstellen: 0 ist ganz eckig und 3 komplett rund.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Schatten<\/div>\n
Entscheide, ob dein prim\u00e4rer Button einen Schatten hat oder nicht. Wenn ja, vergebe diesen wieder mit dem Farben Picker und stelle die Gr\u00f6\u00dfe des Schattens ein.<\/div>\n <\/div>\n <\/div>\n
\n
\n 5 <\/div>\n
\n
Schrift<\/div>\n
Weise dem Button Text eine Schrift, einen Schriftschnitt sowie eine Farbe zu und formatiere ihn anschlie\u00dfend.<\/div>\n <\/div>\n <\/div>\n
\n
\n 6 <\/div>\n
\n
Versalien<\/div>\n
Entscheide, ob der Text in deinem Button komplett gro\u00dfgeschrieben sein soll.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 2 – Hover State des fl\u00e4chigen Buttons anpassen<\/h2>

Nachdem du den Standard-State deines Buttons f\u00fcr einen bestimmten Hintergrund angepasst hast, kannst du zus\u00e4tzlich entscheiden, wie der Button aussieht, wenn deine Lerner mit der Maus dar\u00fcberfahren.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Farbe<\/div>\n
Stelle mit dem Farben Picker ein, zu welcher Farbe der Button beim Dar\u00fcberfahren wechselt.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Konturfarbe<\/div>\n
Falls gew\u00fcnscht, stelle mit dem Farben Picker ein, welche Farbe die Kontur beim Dar\u00fcberfahren bekommen soll.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Schattenfarbe<\/div>\n
Falls ein Schlagschatten gew\u00fcnscht ist, stelle diesen mit dem Farben Picker ein.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Schattenfarbe<\/div>\n
Falls ein Schlagschatten gew\u00fcnscht ist, stelle diesen mit dem Farben Picker ein.<\/div>\n <\/div>\n <\/div>\n
\n
\n 5 <\/div>\n
\n
Schrift<\/div>\n
Bei Bedarf kann sich auch die Schriftfarbe \u00e4ndern. Stelle sie neu ein oder behalte die Farbe aus dem Standard-State bei.<\/div>\n <\/div>\n <\/div>\n
\n
\n 6 <\/div>\n
\n
\u00dcberpr\u00fcfe<\/div>\n
Um zu sehen, ob deine Einstellungen passen, fahre am Ende oder zwischen den einzelnen Schritten mit der Maus \u00fcber ein Button z.B wie hier in dem Kapitel\u00fcbersicht Element.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Option 2 – Kontur Buttons<\/h2>

Wenn du alle Schriftschnitte hochgeladen und beschriftet hast, klicke nur noch auf den Button \u201eHinzuf\u00fcgen\u201c, um die neue Schrift zu speichern.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Kontur Buttons<\/div>\n
Die zweite Option f\u00fcr den prim\u00e4ren Button: Der Kontur Button.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 1 – Standart State des Kontur Buttons anpassen<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Kontur Farbe<\/div>\n
Wenn du den Kontur Button gew\u00e4hlt hast, passe die Farbe der Kontur mit dem Farben Picker an.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Kontur<\/div>\n
Entscheide, was f\u00fcr eine Kontur dein prim\u00e4rer Button hat.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Eckenradius<\/div>\n
Entscheide, welchen Eckenradius dein prim\u00e4rer Button bekommt. Du kannst hier auch einen Wert von 0 bis 3 einstellen: 0 ist ganz eckig und 3 komplett rund.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Schrift<\/div>\n
Weise dem Button Text eine Schrift, einen Schriftschnitt sowie eine Farbe zu und formatiere ihn anschlie\u00dfend.<\/div>\n <\/div>\n <\/div>\n
\n
\n 5 <\/div>\n
\n
Versalien<\/div>\n
Entscheide, ob der Text in deinem Button komplett gro\u00dfgeschrieben sein soll.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 2 –\u00a0 Hover State des Kontur Buttons anpassen<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Kontur Farbe<\/div>\n
Passe die Konturfarbe an, die beim Dar\u00fcberfahren zu sehen sein soll<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Schrift<\/div>\n
Stelle ein, wie sich der Text im Button beim Dar\u00fcberfahren ver\u00e4ndert<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
\u00dcberpr\u00fcfen<\/div>\n
Um zu sehen, ob deine Einstellungen passen, fahre am Ende oder zwischen den einzelnen Schritten mit der Maus \u00fcber ein Button z.B wie hier in dem Kapitel\u00fcbersicht Element.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Option 3 –\u00a0 Ghost Buttons<\/h2>

Der letzte Button Typ steht an. Schau dir in zwei Schritten an, welche Einstellungen es gibt, um die Ghost Buttons perfekt anzupassen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Ghost Buttons<\/div>\n
Die dritte Option f\u00fcr den prim\u00e4ren Button: Der Ghost Button.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 1 – Standart State des Ghost Buttons anpassen<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Schrift anpassen<\/div>\n
Da der Ghost-Button nur aus Text besteht, kannst du ganz leicht die Schriftart, den Schriftschnitt und die Farbe anpassen. Diese kannst du anschlie\u00dfend formatieren und, falls erforderlich, die Versalien aktivieren.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 2 –\u00a0 Hover State des Ghost Buttons anpassen<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Schrift Farbe<\/div>\n
Stelle ein, wie sich die Schrift beim Hover ver\u00e4ndert<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
\u00dcberpr\u00fcfe<\/div>\n
Um zu sehen, ob deine Einstellungen passen, fahre am Ende oder zwischen den einzelnen Schritten mit der Maus \u00fcber ein Button z.B wie hier in dem Kapitel\u00fcbersicht Element.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Sekund\u00e4re Buttons<\/h2>\n

Die Einstellungen f\u00fcr die sekund\u00e4ren Buttons sind dieselben. Du hast nach wie vor die drei Button Styles. Wenn du dich f\u00fcr einen entscheidest, definiere die zwei Zust\u00e4nde f\u00fcr Standard und Hover, diese sind ebenfalls identisch wie die Pr\u00e4mere Buttons.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Schrift Farbe<\/div>\n
Stelle ein, wie sich die Schrift beim Hover ver\u00e4ndert<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Anwendung Entscheide, wie die Buttons in deinem Theme aussehen. Angepasst werden der prim\u00e4re und der sekund\u00e4re Button. Diese kannst du sehr leicht und super pr\u00e4zise mit dem Theme Builder gestalten. Wir zeigen dir hier Schritt f\u00fcr Schritt, wie die Einstellungen unter \u201eButtons\u201c funktionieren. Button \u00dcbersicht finden Um deine Buttons anzupassen, klicke auf den sechsten Punkt […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[20],"doc_tag":[],"class_list":["post-1388","docs","type-docs","status-publish","hentry","doc_category-theme-builder"],"year_month":"2026-06","word_count":913,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Theme Builder","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/theme-builder\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=1388"}],"version-history":[{"count":142,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1388\/revisions"}],"predecessor-version":[{"id":1689,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1388\/revisions\/1689"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=1388"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}