This article is also available in:

Changing the design of a button

One of the key tools for maintaining a consistent website design is customizing the appearance of buttons. By setting a common design in the website styles, you can ensure their consistency across all pages.

In this article, you will learn how to customize different button design options.

You can also watch our short video tutorial on this topic:

Contents:

Changing button designs in global settings
Changing the design of a single button

Changing button design in global settings

Click on the Website Styles icon on the left side of the control panel:

In the window that appears, go to the Buttons section, where you can either select one of the ready-made presets ①:

... or if you want to customize the button appearance yourself, just click on the option you want to edit. There are currently two button designs available that you can customize: Primary ② and Secondary ③.

Note: You can also go to the settings for individual button options via the list of presets. To do this, simply click on the selected preset and you will be taken to a menu where you can select the option you want to edit.

Each of these options can have a Primary ① and Alternate ② design, and for each button option, you can customize the design for light ③ and dark ④ backgrounds separately:

Once you have selected the button type, you can edit the following settings in a new window:

In the Button shape section, you can configure Paddings ① and Corner radius ② separately for each of the standard button size options:

Tip: You can also customize the rounding of each corner separately by clicking on the icon next to the rounding degree field.

Fill color

You can separately customize the button color in the default state ① and when hovering over it ②. In the drop-down menu ③, you can choose whether the color will be a solid fill or a gradient.

Border color

Similar to the fill color, you can configure the border for the two button states — whether it is a solid line, for example, or a dotted line, which you can select from the drop-down list ①, and its color:

Tip: Select the No background option from the drop-down list if you want the button to simply have a color fill without a border.

Text color

Go to the Text tab to set its color for the two button states:

Shadows

Within this feature, you can specify the position of the shadow along the X and Y axes, the blur of the shadow, and its size, separately for the button design in its standard state and when hovering:

Important: Don't forget to customize the button design for dark backgrounds separately:

Changing the design of a single button

To change the design of a specific button on the website, click on it and then click on the “gear” icon to go to the settings:

... if you have a button with absolute positioning or pinned to the screen, you also need to click on it, only the settings icon will be at the top:

Open the Style tab in a new window and select the appropriate type (Primary, Secondary, or Link), style, and button size:

Tip: Choose the Primary type for buttons with an important call to action, such as “Submit Application.” The Secondary type is better for buttons with a slightly less important call to action, such as “View Portfolio.” The Link type is intended for displaying additional information — for example, “Learn more.”

In addition, you can add an icon to the button and change its alignment relative to the text:

Don't forget to publish your site for the changes to appear on it.

Note: Decide what happens when a button is clicked by adding a link to it according to the instructions in the Adding links to elements article.

Updated on: 11/13/2025

Was this article helpful?

Thank you!