Global button styles

Set the appearance of buttons across your website from one place, then create separate rules for specific button types when needed. Navigate to Dashboard -> Theme Settings -> Styles & Colors -> Buttons.

Global button groups

The global settings are divided into two button groups. These groups provide the base design used throughout the website.

Default buttons

This group controls most standard buttons added by the theme and installed plugins.

Accent buttons

This group is intended for prominent call-to-action and shopping buttons, such as Add to cart and Checkout.

For each group, you can configure:

• Button style: Flat, 3D, Round, or Rounded
• Typography, including the font family, weight, style, size, and text transform
• Background and hover background colors
• Text and hover text color schemes
• Padding for desktop, tablet, and mobile devices

Customize specific buttons

Use Advanced button styles when a specific button should look different from its global group. You can target individual button types such as a single product Add to cart button, the Place order button, mini-cart buttons, wishlist buttons, or a contact form submit button.

1. Scroll to the Advanced button styles section.
2. In Assigned to elements, select one or more button types that should use the rule.
3. Configure the typography, text and background colors, hover colors, and responsive padding. Leave any setting empty if it should continue using the global value.
4. Click Add rule if another group of buttons requires a different design.
5. Save the Theme Settings.

Button styles from page builders

A Button element with its own colors configured in Gutenberg, Elementor, or WPBakery may use those element-level settings instead of the global button colors. Remove the custom colors from the element if you want it to inherit the styles configured in Theme Settings.