Button Styles
Updated 7 months 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.