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.
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.