Button Styles

Updated 1 month ago

Add as many button styles as you need to fit your needs. Button Styles can be applied to all theme-related button elements: Button, ActionBox, Grid, Pricing Table, and Contact Form.

Click on a Button preview to expand its settings:

How to add a new Button Style? #

Click the corresponding icon, it appears under the list of the buttons:

How to remove Button Style? #

Click on the corresponding icon when hovering over the button preview:

The Default style, first in the list, can't be deleted this style is used by 3rd party plugins, such as contact forms submit buttons.

Button Style Name #

Set the desired name for a particular button style, it appears as a text on a button preview

Colors / Colors on hover #

Apply colors set to match your design

Shadow / Shadow on hover #

Apply a shadow effect by specifying the relevant values for its Horizontal and Vertical offsets, Blur, and Spread.

Font #

Choose which font family will be applied to all buttons, it takes values from the Typography tab.

Text Styles #

Choose whether your button's text will be uppercase or italic.

Font Weight #

Set a font weight for all buttons.

Letter Spacing #

Set letter-spacing (distance between the letters), it depends on button Font Size value.

Hover Style #

Select which effect will be applied to buttons when you hover over them.

Relative Height #

Depends on Font Size, 0.8em means 0.8 times the font size if the font size is 16px, the height will be 16 * 0.8 = 12.8px

Relative Width #

Depends on Font Size, 1.8em means 1.8 times the font size if the font size is 16px, the width will be 16 * 1.8 = 28.8px

Border Width #

Set the button border width.

Border Radius #

Allows specifying the border radius for the button by using px, em, and % values. You can specify up to 4 space-separated values to set up different border radius values for different corners of the button.