Tutorials

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 „Buttons“ work.

Find button overview #

To customize your buttons, click on the sixth item „Buttons“.

Writings

Select buttons to see more settings.

Buttons Overview #

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.

Background selection

Click on one of your existing backgrounds to match the primary and secondary buttons to that background.

Button Settings

The button overview consists of primary and secondary buttons. We will take a look at the customization options behind them in the next step.

Option 1 – Flat buttons #

After selecting the background for which you want to customize the buttons, click on „Primary“ to edit the primary buttons.

Button type

You have three options to find the perfect button type. You can choose between a filled button, outline, or ghost.

Standard and hover states

Additionally, you can customize the states of your buttons: the default and the hover state.

Step 1 – Customize the standard state of the block button #

Button color

If you have selected the flat button, adjust the color of the button using the color picker.

Contour

Decide whether your primary button has an outline or not. If it does, reassign it using the color picker and set the outline width.

Corner radius

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.

Shadow

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.

Writing

Assign a font, a font style, and a color to the button text, and then format it.

Versals

Specify whether the text of your button should be displayed entirely in uppercase.

Step 2 – Adjust the hover state of the solid button #

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.

Color

Use the color picker to set the color the button changes to when hovered over.

contour color

If desired, use the color picker to set the color the contour should change to when hovered over.

shadow color

If a drop shadow is desired, set it using the color picker.

shadow color

If a drop shadow is desired, set it using the color picker.

Writing

If necessary, the font color can also change. Set it again or keep the color from the default state.

Check

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.

Option 2 – Contour Buttons #

Once you have uploaded and labeled all font styles, click the „Add“ button to save the new font.

Contour Buttons

The second option for the primary button: The outline button.

Step 1 – Adjust default state of the contour button #

Outline color

If you have selected the contour button, adjust the color of the contour using the color picker.

Contour

Decide what kind of border your primary button should have.

Corner radius

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.

Writing

Assign a font, a font style, and a color to the button text, and then format it.

Versals

Decide whether the text on your button should be in all caps.

Step 2 – Adjust the hover state of the outline button #

Outline color

Adjust the outline color to be displayed on hover

Writing

Configure how the button text changes on hover

Check

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.

Option 3 – Ghost Buttons #

The last button type is coming up. Take a look in two steps at the settings available to perfectly customize the ghost buttons.

Ghost Buttons

The third option for the primary button: The ghost button.

Step 1 – Adjust the standard state of the ghost button #

Adjust font

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.

Step 2 – Adjust the hover state of the ghost button #

Font color

Set how the font changes on hover

Check

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.

Secondary buttons #

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 „Standard“ and „Hover“. These work in the exact same way as with the primary buttons.

Font color

Set how the font changes on hover

Help

What would you like to know?

Tutorials

How-tos

Buttons

Application #

Find button overview #

Buttons Overview #

Option 1 – Flat buttons #

Step 1 – Customize the standard state of the block button #

Step 2 – Adjust the hover state of the solid button #

Option 2 – Contour Buttons #

Step 1 – Adjust default state of the contour button #

Step 2 – Adjust the hover state of the outline button #

Option 3 – Ghost Buttons #

Step 1 – Adjust the standard state of the ghost button #

Step 2 – Adjust the hover state of the ghost button #

Secondary buttons #