Buttons Colors

The Button Colors section allows you to adjust the colors, borders, shadows, icons, and hover effects for different button types across the store.

Each button type (Main, Secondary, Checkout, Tabs, Link, and Media buttons) has its own group of settings, so you can create a consistent visual hierarchy — for example, making primary call-to-action buttons stand out more, while secondary and utility buttons are more subtle.

Hover states help communicate interactivity, while gradients, shadows, and icon color options allow you to style buttons to match your brand identity.

---

Location: Theme settings -> Buttons Colors

---

Main button

Used for primary actions such as “Add to cart”

Option	Explanation
Border	Sets the border color of the primary button.
Show background	Enables a filled background or keeps the button outline-only.
Background	Defines the solid fill color when background is enabled.
Background gradient	Allows using a gradient instead of a solid background color.
Border	Adjusts the border color when used together with background/hover settings.
Text	Sets the color of the text inside the main button.
Icon	Sets the color of any icon used in the button.
Show background on hover	Adds a filled background only when hovered, useful for outline-style buttons.
Background hover	Sets the background color when the button is hovered.
Background gradient hover	Applies a gradient background on hover.
Border hover	Sets the border color when hovered.
Text hover	Changes text color on hover.
Icon hover	Changes icon color on hover.
Enable shadow	Adds a shadow under the button for depth and emphasis.

---

Secondary button

Used for account, wishlist, compare, and other auxiliary actions)

Option	Explanation
Border	Sets the border color of secondary buttons.
Show background	Enables or disables a filled background.
Border	Controls border color for normal state and hover behavior.
Text	Sets the button’s text color.
Icon	Sets the icon color inside the button.
Show background on hover	Adds background fill only when hovered.
Background hover	Sets hover background color.
Background gradient hover	Applies gradient background when hovered.
Border hover	Defines border color on hover.
Text hover	Adjusts text color when hovered.
Icon hover	Adjusts icon color when hovered.
Enable shadow	Adds shadow to visually separate buttons from the background.

---

Checkout button

Used for actions leading to checkout or purchase completion

Option	Explanation
Border	Sets border color of checkout-related buttons.
Show background	Enables a solid or outline button style.
Background	Defines solid background color.
Background gradient	Allows gradient fill instead of solid color.
Text	Sets the text color.
Icon	Colors any icons within the button.
Show background on hover	Enables fill only when hovered.
Background hover	Sets background color for hover state.
Background gradient hover	Applies a gradient on hover.
Text hover	Changes text color when hovered.
Icon hover	Changes icon color when hovered.
Enable shadow	Adds depth using a drop shadow.

---

Tabs button

Used in tabbed blocks or section navigation controls

Option	Explanation
Border	Sets the border color of tab buttons.
Show background	Enables filled or outline appearance.
Background	Sets solid background color.
Background gradient	Applies gradient background styling.
Text	Controls text color.
Show background on hover	Adds background only when hovered over.
Background hover	Changes background color on hover.
Background gradient hover	Applies gradient background on hover.
Text hover	Adjusts text color on hover.

---

Link button

Text-only action links that act like buttons

Option	Explanation
Text	Sets the link text color.
Icon	Sets the icon color if included.
Text hover	Adjusts text color on hover.
Icon hover	Adjusts icon color on hover.

---

Media buttons

Used for video play buttons, slider arrows, and slider dots

Option	Explanation
Background	Sets the background color for media-related control buttons.
Icon	Sets the icon color inside those buttons.
Background hover	Defines background color when hovered.
Icon hover	Defines icon color when hovered.
Slider dots	Controls the color/styling of navigation dots in sliders.
Slider arrows	Controls styling and color for arrow navigation icons.