Button Styles

Updated 1 year 1 month ago

Add as many buttons styles as you need to fit your needs. Button Styles can be applied to all theme-related button elements: Button, ActionBox, Grid, Pricing Table, 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 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 and set its size, it depends on button Font Size value.

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

Corners Radius #

Depends on Font Size, 0.3em means 0.3 times the font size if the font size is 16px, the radius will be 16 * 0.3 = 4.8px

Border Width #

Set the button border width.