Customizing button styles is one of the most important steps in creating a consistent and professional website design. By configuring global button styles, you can maintain the same appearance across all website pages and improve the overall user experience.
In this guide, you will learn to:
- customize global button styles;
- choose individual button designs from the global button styles;
- configure colors, borders, shadows, and sizes;
- create separate styles for light and dark backgrounds.
Contents
Changing Button Design in Global Settings
Global button styles allow you to apply the same design across your entire website.
Click the Site Styles icon in the top bar of the control panel:
In the opened window, navigate to the Buttons section.
Here you can:
- choose one of the ready-made button presets by clicking the Presets button:
- or fully customize button styles manually.
Currently, there are two customizable button types that you can change by clicking the needed button type:
- Primary
-
Secondary
Note: You can also access individual button settings directly from the preset list by clicking the selected preset.
Each button type includes:
- Primary style
-
Alternate style
In addition, you can configure separate styles for:
- light backgrounds;
- dark backgrounds.
This makes buttons readable and visually balanced in different website sections.
Button Customization Options
After selecting a button type, you can customize its appearance in detail.
Button Shape
In the Button Shape section, you can configure:
- button paddings;
- corner radius;
- button sizes.
Settings can be customized separately for each standard button size.
Tip: You can adjust each corner radius individually by clicking the advanced corner settings icon.
Fill Color
You can configure different fill colors for:
- the default button state;
- the hover state.
The dropdown menu also allows you to select:
- solid color fill;
- gradient background.
Border Settings
Border settings can also be customized separately for default and hover states.
Available options include:
- solid border;
- dashed border;
- dotted border;
- other border styles.
You can also configure the border color independently.
Tip: Select Transparent (in the beginning of the colors list) if you want the button to appear without a border.
Text Color
Open the Text tab to customize text colors for:
- the normal state;
- the hover state.
Shadows
You can configure button shadows separately for normal and hover states.
Available shadow settings include:
- X-axis position;
- Y-axis position;
- blur intensity;
- shadow size.
Important: Configure Styles for Dark Backgrounds
Do not forget to customize separate button styles for dark backgrounds to ensure proper contrast and readability.
Choosing the Design of some certain Button
You can also customize individual buttons independently from global styles.
Step 1: Open Button Settings
Click the needed button and then click the gear icon to open its settings.
For buttons with:
- absolute positioning;
- pinned positioning;
the settings icon will appear at the top of the element after clicking it:
Step 2: Open the Design Tab
In the settings window, open the Design tab.
Here you can choose:
- button type:
- Primary
- Secondary
- Link
- button style;
- button size.
Tip:
- Use Primary buttons for the main call-to-action, such as “Submit Application” or “Buy Now.”
- Use Secondary buttons for less important actions, such as “View Portfolio.”
- Use Link buttons for secondary informational actions like “Learn More.”
Button Size
You can choose from the existing button size presets (Large, Medium, Small) or set Custom Size, so you can manually configure button paddings separately for each device type.
Adding Icons to Buttons
You can also:
- add icons to buttons;
- change icon alignment relative to the text.
This helps create more visually engaging call-to-action elements.
Publish the Website
After making changes, publish your website for the updated button styles to appear live.
Comments