Buttons - Creative Elements Documentation

Buttons lets you define the default appearance of both Creative Elements buttons and buttons provided by your PrestaShop theme. This helps keep calls to action consistent across pages, widgets, and native theme components.

Creative Elements separates its own button styles from the theme's button styles. This gives you control over both systems from the same Theme Style area without forcing them to look identical.

Tip: Define your main button hierarchy before building pages. A clear Default, Primary, and Secondary button system makes it easier to keep actions visually consistent throughout the store.

Default Button

Define the general Creative Elements button style. This style applies to standard buttons that do not use the Primary or Secondary button variant.

Typography

Configure the typography of the button text. Font Size is not included here because Creative Elements button font sizes are controlled separately for each button size.

Text Shadow

Add and configure a shadow behind the button text.

Normal

Define the default appearance of the button.

Text Color

Set the button text color.

Background

Choose a Classic or Gradient background.

Classic: Set the Background Color.
Gradient: Set the first and second colors, their locations, the gradient type, and the angle or position.

Box Shadow

Add and configure a shadow around the button.

Border

Configure the border type, width, and color.

Hover

Define the appearance of the button when the visitor hovers over it or focuses it.

Text Color: Set the text color for the hover and focus state.
Background Color: Set the primary background color used on hover.
Second Color: Set the second hover background color when the Normal background uses a Gradient.
Box Shadow: Configure the button shadow for the hover state.
Border: Configure the border for the hover state.

Size

Configure the visual dimensions of each Creative Elements button size independently.

S, M, L, XL and XS

Font Size: Set the font size for the selected button size. Available units are px, em, rem, vw, and custom.
Padding: Set the space between the button text and its edges. Available units are px, %, em, rem, vw, and custom.
Border Radius: Round the corners of the selected button size. Available units are px, %, em, rem, and custom.

Primary Button

Define the Creative Elements Primary button style. Use it for the most important actions you want visitors to notice first.

Typography

Configure the typography of the button text. Font Size is not included here because Creative Elements button font sizes are controlled separately for each button size.

Text Shadow

Add and configure a shadow behind the button text.

Normal

Define the default appearance of the button.

Text Color

Set the button text color.

Background

Choose a Classic or Gradient background.

Classic: Set the Background Color.
Gradient: Set the first and second colors, their locations, the gradient type, and the angle or position.

Box Shadow

Add and configure a shadow around the button.

Border

Configure the border type, width, and color.

Hover

Define the appearance of the button when the visitor hovers over it or focuses it.

Text Color: Set the text color for the hover and focus state.
Background Color: Set the primary background color used on hover.
Second Color: Set the second hover background color when the Normal background uses a Gradient.
Box Shadow: Configure the button shadow for the hover state.
Border: Configure the border for the hover state.

Size

Configure the visual dimensions of each Creative Elements button size independently.

S, M, L, XL and XS

Font Size: Set the font size for the selected button size. Available units are px, em, rem, vw, and custom.
Padding: Set the space between the button text and its edges. Available units are px, %, em, rem, vw, and custom.
Border Radius: Round the corners of the selected button size. Available units are px, %, em, rem, and custom.

Secondary Button

Define the Creative Elements Secondary button style. Use it for supporting or alternative actions that should be visually distinct from the Primary action.

Typography

Configure the typography of the button text. Font Size is not included here because Creative Elements button font sizes are controlled separately for each button size.

Text Shadow

Add and configure a shadow behind the button text.

Normal

Define the default appearance of the button.

Text Color

Set the button text color.

Background

Choose a Classic or Gradient background.

Classic: Set the Background Color.
Gradient: Set the first and second colors, their locations, the gradient type, and the angle or position.

Box Shadow

Add and configure a shadow around the button.

Border

Configure the border type, width, and color.

Hover

Define the appearance of the button when the visitor hovers over it or focuses it.

Text Color: Set the text color for the hover and focus state.
Background Color: Set the primary background color used on hover.
Second Color: Set the second hover background color when the Normal background uses a Gradient.
Box Shadow: Configure the button shadow for the hover state.
Border: Configure the border for the hover state.

Size

Configure the visual dimensions of each Creative Elements button size independently.

S, M, L, XL and XS

Font Size: Set the font size for the selected button size. Available units are px, em, rem, vw, and custom.
Padding: Set the space between the button text and its edges. Available units are px, %, em, rem, vw, and custom.
Border Radius: Round the corners of the selected button size. Available units are px, %, em, rem, and custom.

Theme Default Button

Style the default button class provided by the active PrestaShop theme. This targets theme buttons that are not marked as Primary or Secondary.

Typography

Configure the typography used by this PrestaShop theme button style.

Text Shadow

Add and configure a shadow behind the button text.

Normal

Text Color: Set the normal button text color.
Background Color: Set the normal button background color.
Box Shadow: Add and configure a shadow around the button.
Border: Configure the border type, width, and color.

Hover

Text Color: Set the text color used on hover, active, and focus states.
Background Color: Set the background color used on hover, active, and focus states.
Box Shadow: Configure the button shadow for the interactive state.
Border: Configure the border for the interactive state.

Spacing and Shape

Padding: Set the internal spacing of the theme button. Available units are px, %, em, rem, vw, and custom.
Border Radius: Round the corners of the theme button. Available units are px, %, em, rem, and custom.

Theme Primary Button

Style the Primary button class provided by the active PrestaShop theme.

Typography

Configure the typography used by this PrestaShop theme button style.

Text Shadow

Add and configure a shadow behind the button text.

Normal

Text Color: Set the normal button text color.
Background Color: Set the normal button background color.
Box Shadow: Add and configure a shadow around the button.
Border: Configure the border type, width, and color.

Hover

Text Color: Set the text color used on hover, active, and focus states.
Background Color: Set the background color used on hover, active, and focus states.
Box Shadow: Configure the button shadow for the interactive state.
Border: Configure the border for the interactive state.

Spacing and Shape

Padding: Set the internal spacing of the theme button. Available units are px, %, em, rem, vw, and custom.
Border Radius: Round the corners of the theme button. Available units are px, %, em, rem, and custom.

Theme Secondary Button

Style the Secondary button class provided by the active PrestaShop theme.

Typography

Configure the typography used by this PrestaShop theme button style.

Text Shadow

Add and configure a shadow behind the button text.

Normal

Text Color: Set the normal button text color.
Background Color: Set the normal button background color.
Box Shadow: Add and configure a shadow around the button.
Border: Configure the border type, width, and color.

Hover

Text Color: Set the text color used on hover, active, and focus states.
Background Color: Set the background color used on hover, active, and focus states.
Box Shadow: Configure the button shadow for the interactive state.
Border: Configure the border for the interactive state.

Spacing and Shape

Padding: Set the internal spacing of the theme button. Available units are px, %, em, rem, vw, and custom.
Border Radius: Round the corners of the theme button. Available units are px, %, em, rem, and custom.

Creative Elements buttons vs. Theme buttons

The first three styles control buttons generated by Creative Elements. The Theme Default, Theme Primary, and Theme Secondary styles target standard button classes used by the active PrestaShop theme.

Good to know: Theme button styling depends on the theme using the standard button classes targeted by Creative Elements. Custom theme markup or highly specific theme CSS can affect the final appearance.

Normal and Hover states

Each button style includes separate settings for its normal and interactive appearance. Defining both states helps visitors understand that an element is clickable and gives the interface a more polished feel.

Tip: Keep hover changes noticeable but consistent. A moderate change in background, text color, border, or shadow is usually enough; the button should still feel like the same component.

Using Global Colors and Global Fonts

Button styles work especially well when combined with Global Colors and Global Fonts. Instead of entering the same visual values manually, connect recurring button colors and typography to reusable global values.

For example, you can use a Global Color for your main action background, another for secondary actions, and a shared Global Font for all button labels. This makes later brand changes much easier to manage.

Button hierarchy

A button hierarchy helps visitors immediately understand which action is most important.

Primary: Use for the main action in a section or flow, such as Add to Cart, Continue, or Submit.
Secondary: Use for an alternative or supporting action that should remain visible but less dominant.
Default: Use for neutral actions that do not need the visual priority of a Primary button.

Tip: Avoid making every button look equally important. If Primary, Secondary, and Default buttons all have the same visual weight, the hierarchy loses its purpose.

Button sizes

Creative Elements buttons provide separate styles for S, M, L, XL, and XS. Each size has its own Font Size, Padding, and Border Radius controls, allowing you to build a consistent size scale rather than resizing individual buttons manually.

Theme buttons do not use this Creative Elements size system in Theme Style. Instead, they have a shared Typography setting plus responsive Padding and Border Radius controls.

Note: The size labels belong to Creative Elements button variants. Their final dimensions depend on the Font Size, Padding, and Border Radius values you configure for each size.

Recommended workflow

Define the visual role of your Default, Primary, and Secondary buttons.
Configure shared Typography and Text Shadow settings.
Set the Normal state, including text, background, shadow, and border.
Configure a clear Hover state.
Set the S, M, L, XL, and XS size scale for Creative Elements buttons.
Style Theme Default, Theme Primary, and Theme Secondary buttons to match or complement your Creative Elements button system.
Reuse Global Colors and Global Fonts wherever possible.
Only override individual buttons when a specific design genuinely requires it.

Important: Individual widget settings, theme CSS, or custom CSS can override Theme Style values. If a button does not follow the expected style, check whether it has local styling or whether the active theme applies more specific CSS rules.