Button Styles

Updated 3 months ago

At Theme Options > Button Styles you can add/edit button styles for your site. These styles will be applied to the relevant content elements that include a button in their layout. 

The full list of elements and settings using button styles includes:

• "Back to top" Button — assigned at Theme Options > General.
• Cookie Notice — a cookie consent button, assigned at Theme Options > General.
• Shop Primary Buttons Style and Secondary Buttons Style — styles applied to your WooCommerce shop, including add to cart button, cart and checkout navigation buttons, discount code submit button, order confirmation button, and others. 
• Button element.
• Carousel element (prev/next navigation arrows style).
• Cart Page - Totals element.
• Contact Form element.
• Checkout Page - Payment element.
• Coupon form element.
• Action Box element.
• FlipBox element.
• Grid/Carousel element ("show more" button).
• Popup element (with the button trigger).
• Post taxonomy element (when its style is set to "display as > button").
• Pricing Table element.

Click on a Button preview to expand its settings:

Button Style Settings #

Button Style Name #

Set the desired name for a particular button style, it appears as 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 the 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.

Default Button Style #

The first item in the list of button styles is considered the "Default" style.

It's applied to most of the content elements that include a button and also affects some third-party plugins, such as Contact Form 7, Gravity Forms, and other plugins that imply using a button.  

If you put another button style to the first position in the list, it will become a new default style. You can reorder the list of button styles with drag and drop.  

If there's only one button style in the list, you won't be able to remove it, as there's always must be a default button style for the relevant content elements.