{"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-06-11T15:54:42","modified_gmt":"2026-06-11T15:54:42","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

Application<\/h2>

Decide what the buttons in your theme should look like. The primary and secondary buttons are customized. You can design these very easily and with super precision using the Theme Builder. We will show you step by step how the settings under \u201eButtons\u201c work.<\/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

Find button overview<\/h2>

To customize your buttons, click on the sixth item \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
Writings<\/div>\n
Select buttons to see more settings.<\/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 Overview<\/h2>

In the button overview, you will find all your existing backgrounds in first place. In second place, you will find the settings for the primary and secondary 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
Background selection<\/div>\n
Click on one of your existing backgrounds to match the primary and secondary buttons to that background.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Button Settings<\/div>\n
The button overview consists of primary and secondary buttons. We will take a look at the customization options behind them in the next step.<\/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 \u2013 Flat buttons<\/h2>

After selecting the background for which you want to customize the buttons, click on \u201ePrimary\u201c to edit the primary 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
Button type<\/div>\n
You have three options to find the perfect button type. You can choose between a filled button, outline, or ghost.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Standard and hover states<\/div>\n
Additionally, you can customize the states of your buttons: the default and the 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

Step 1 \u2013 Customize the standard state of the block button<\/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 color<\/div>\n
If you have selected the flat button, adjust the color of the button using the color picker.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Contour<\/div>\n
Decide whether your primary button has an outline or not. If it does, reassign it using the color picker and set the outline width.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Corner radius<\/div>\n
Choose the corner radius for your primary button. You can set a value from 0 to 3: 0 is completely square and 3 is completely round.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Shadow<\/div>\n
Decide whether your primary button has a shadow or not. If it does, assign it again using the color picker and set the size of the shadow.<\/div>\n <\/div>\n <\/div>\n
\n
\n 5 <\/div>\n
\n
Writing<\/div>\n
Assign a font, a font style, and a color to the button text, and then format it.<\/div>\n <\/div>\n <\/div>\n
\n
\n 6 <\/div>\n
\n
Versals<\/div>\n
Specify whether the text of your button should be displayed entirely in uppercase.<\/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

Step 2 \u2013 Adjust the hover state of the solid button<\/h2>

After adjusting the default state of your button for a specific background, you can also decide how the button looks when your learners hover their mouse over it.<\/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
Color<\/div>\n
Use the color picker to set the color the button changes to when hovered over.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
contour color<\/div>\n
If desired, use the color picker to set the color the contour should change to when hovered over.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
shadow color<\/div>\n
If a drop shadow is desired, set it using the color picker.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
shadow color<\/div>\n
If a drop shadow is desired, set it using the color picker.<\/div>\n <\/div>\n <\/div>\n
\n
\n 5 <\/div>\n
\n
Writing<\/div>\n
If necessary, the font color can also change. Set it again or keep the color from the default state.<\/div>\n <\/div>\n <\/div>\n
\n
\n 6 <\/div>\n
\n
Check<\/div>\n
To see if your settings are correct, hover your mouse over a button at the end or between individual steps, for example like here in the chapter overview 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 \u2013 Contour Buttons<\/h2>

Once you have uploaded and labeled all font styles, click the \u201eAdd\u201c button to save the new font.<\/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
Contour Buttons<\/div>\n
The second option for the primary button: The outline 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

Step 1 \u2013 Adjust default state of the contour button<\/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
Outline color<\/div>\n
If you have selected the contour button, adjust the color of the contour using the color picker.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Contour<\/div>\n
Decide what kind of border your primary button should have.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Corner radius<\/div>\n
Decide what corner radius your primary button should have. You can also set a value from 0 to 3 here: 0 is completely square and 3 is completely round.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Writing<\/div>\n
Assign a font, a font style, and a color to the button text, and then format it.<\/div>\n <\/div>\n <\/div>\n
\n
\n 5 <\/div>\n
\n
Versals<\/div>\n
Decide whether the text on your button should be in all caps.<\/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

Step 2 \u2013 Adjust the hover state of the outline button<\/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
Outline color<\/div>\n
Adjust the outline color to be displayed on hover<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Writing<\/div>\n
Configure how the button text changes on hover<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Check<\/div>\n
To see if your settings are correct, hover your mouse over a button at the end or between individual steps, for example like here in the chapter overview 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 \u2013 Ghost Buttons<\/h2>

The last button type is coming up. Take a look in two steps at the settings available to perfectly customize the ghost 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
Ghost Buttons<\/div>\n
The third option for the primary button: The 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

Step 1 \u2013 Adjust the standard state of the ghost button<\/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
Adjust font<\/div>\n
Since the ghost button consists only of text, you can easily adjust the font, font style, and color. You can then format these and, if necessary, enable uppercase letters.<\/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

Step 2 \u2013 Adjust the hover state of the ghost button<\/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
Font color<\/div>\n
Set how the font changes on hover<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Check<\/div>\n
To see if your settings are correct, hover your mouse over a button at the end or between individual steps, for example like here in the chapter overview 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

Secondary buttons<\/h2>

The settings for the secondary buttons are identical. Here, too, you have the three button styles available. When you choose a style, you define the two states \u201eStandard\u201c and \u201eHover\u201c. These work in the exact same way as with the primary 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
Font color<\/div>\n
Set how the font changes on hover<\/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>\n","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-09","word_count":916,"total_views":"1","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":145,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1388\/revisions"}],"predecessor-version":[{"id":3428,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1388\/revisions\/3428"}],"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}]}}