Scale Theme's button system with 3 distinct styles, 6 spectacular hover effects, decoration presets, and full customization of radius, spacing, and border.
Button system
Buttons are the most important elements in your store. They are what turn a visitor into a customer. Scale Theme offers an extremely flexible button system with 3 distinct styles, 6 hover effects, decoration presets, and fine control over every visual detail. Everything is configured globally: change one setting, and every button in your store updates.
The 3 button styles
Every section that uses a button lets you choose from 3 styles. Each style has its own color combination and its own role in the visual hierarchy.
Style 1 -- The primary CTA
This is the most visible button, the one that catches the eye first. By default, it uses the Accent 1 color from your palette as its background.
Typical use: "Add to cart", "Buy now", "Get started", "Sign up"
Style 2 -- The secondary CTA
The alternative button, used when there is already a Style 1 button in the same section. By default, it uses the Accent 2 color.
Typical use: "Learn more", "View collection", "Compare", "View details"
Style 3 -- The subtle CTA
A minimalist button, transparent by default. Used for tertiary actions or links that need to be clickable without drawing too much attention.
Typical use: "View all", text links, secondary actions, navigation
Button colors
Each style has its own background/text color configuration. You can customize these colors in Theme settings > Buttons.
Style 1 -- Color configuration
| Setting | Options | Default |
|---|---|---|
| Background color | Accent 1 / Accent 2 / Text / Transparent | Accent 1 |
| Text color | Background / Foreground / Accent 1 / Accent 2 | Background |
Style 2 -- Color configuration
| Setting | Options | Default |
|---|---|---|
| Background color | Accent 1 / Accent 2 / Text / Transparent | Accent 2 |
| Text color | Background / Foreground / Accent 1 / Accent 2 | Background |
Style 3 -- Color configuration
| Setting | Options | Default |
|---|---|---|
| Background color | Accent 1 / Accent 2 / Text / Transparent | Transparent |
| Text color | Background / Foreground / Accent 1 / Accent 2 | Background |
Global shape settings
These settings apply to ALL buttons in your store, regardless of style.
Font
| Setting | Options | Default |
|---|---|---|
| Font | Heading / Body | Heading |
| Font size | 80% to 130% | 100% |
| Bold | On / Off | On |
The Heading font gives buttons a more commanding and authoritative look. The Body font gives buttons a more subtle and natural feel.
Border radius
The border radius defines the shape of the button corners. It is one of the settings with the greatest impact on visual identity.
| Value | Appearance | Feel | Best for |
|---|---|---|---|
| 0 px | Square, sharp corners | Modern, architectural, edgy | Tech stores, minimalist design, streetwear |
| 4-8 px | Slightly rounded | Professional, accessible | Most stores, general use |
| 10-20 px | Rounded | Friendly, approachable, soft | Food, beauty, kids stores |
| 30-50 px | Very rounded | Playful, modern, startup | Apps, SaaS, trendy stores |
| 100 px | Pill / capsule | Fun, mobile-app feel, strong CTA | Youth brands, fashion, lifestyle |
Spacing
Spacing controls how much "breathing room" surrounds the button text.
| Setting | Range | Default | Impact |
|---|---|---|---|
| Horizontal spacing | 4-40 px | 16 px | Button width (left/right of text) |
| Vertical spacing | 4-40 px | 4 px | Button height (above/below text) |
Border
| Setting | Options | Default |
|---|---|---|
| Show border | On / Off | Off |
| Thickness | 1-5 px | 1 px |
| Border color | Darker / Lighter / Text / Subtle | Darker |
The border adds extra definition to buttons. It is particularly useful for Style 3 (transparent) and buttons on colored backgrounds.
The 4 border color options:
| Border color | Description | Visual effect |
|---|---|---|
| Darker | Darker version of the button background | Subtle border, almost invisible, adds depth |
| Lighter | Lighter version of the button background | Highlight effect, useful on dark backgrounds |
| Text | Text color from the palette | Clearly visible, high-contrast border |
| Subtle | Text color at low opacity | Very discreet border, just a suggestion |
The 6 hover effects
The hover effect is what happens when a visitor moves their mouse over a button. This is a crucial moment: a good hover effect confirms the button is clickable and encourages action. Scale Theme offers 6 unique effects.
1. Darker
The button background darkens slightly. This is the most classic and universal effect.
Feel: Professional, understated, predictable Best for: All stores, general use, merchants who want a classic approach
2. Lighter
The button background lightens on hover. The inverse of Darker.
Feel: Soft, welcoming, airy Best for: Wellness, beauty, lifestyle stores
3. Fill Slide
A color "slides" from the bottom of the button to the top, as if the button were filling up. This is a spectacular, modern effect.
Feel: Dynamic, energetic, modern, premium Best for: Fashion stores, tech, premium brands. This is our recommendation for primary CTAs.
4. Scale
The button slightly enlarges on hover (about 105% of its size). Simple but effective.
Feel: Playful, responsive, friendly Best for: Kids, toys, food, fun brands
5. Paint
An animated "paint" effect on the button. The color appears to spread like paint.
Feel: Artistic, creative, unique, memorable Best for: Art stores, design, creative fashion, brands with a strong identity
6. Magnetic
The button "follows" the mouse cursor slightly, as if magnetically attracted. This is the most innovative and memorable effect.
Feel: High-tech, interactive, immersive, "wow" factor Best for: Hero sections, brand pages, immersive experiences. Use sparingly.
Comparing all 6 effects
| Effect | Intensity | Mobile | Recommended for |
|---|---|---|---|
| Darker | Subtle | Yes (tap) | General use |
| Lighter | Subtle | Yes (tap) | Soft ambiance |
| Fill Slide | Strong | Yes (tap) | Primary CTAs |
| Scale | Medium | Yes (tap) | Fun ambiance |
| Paint | Strong | Partial | Creative identity |
| Magnetic | Very strong | No (desktop only) | Hero sections |
Hover Translate
In addition to the hover effect, there is an extra option: Hover Translate (enabled by default).
When enabled, the button moves slightly upward on hover (about 2-3px). This effect combines with the chosen hover effect for a double feedback.
Decoration presets
Decoration presets are an advanced visual styling system that is applied on top of the base styles. They are configured in Theme settings > Media decoration > Buttons.
Classic
Adds a light shadow and a classic border treatment to the button. Gives a "physical button" appearance that stands out from the page.
Best for: Traditional stores, standard e-commerce, merchants who want a solid and familiar look.
Gradient
Adds a subtle gradient on the button background, giving a richer, more dimensional appearance.
Best for: Premium stores, beauty, cosmetics, high-end brands.
Brick
Retro style with a thick border and an offset shadow, evoking a "cut-out" button placed on the page.
Best for: Vintage stores, retro, handmade goods, streetwear, brands with bold graphic identities.
Ghost
A completely transparent button with only a visible border. The text and border share the same color.
Best for: Minimalist stores, luxury, clean design. Ideal for secondary buttons that should not draw too much attention.
Bubble
Very rounded corners and a soft surface treatment that gives a "bubble" look. The shadow is diffuse and the button appears to float.
Best for: Kids stores, toys, healthy food, "friendly" brands.
Comparing all presets
Option: Apply to navigation buttons
A checkbox lets you apply the chosen decoration preset to slider navigation buttons (previous/next arrows) as well. By default, this option is off.
Recommended combinations by store type
Luxury fashion store
- Style 1: Text background (black), Background text (white)
- Border radius: 0 px (square)
- Hover effect: Fill Slide
- Preset: None or Ghost
- Spacing: 24/8 px
Tech / Startup store
- Style 1: Accent 1 background (bright blue), Background text (white)
- Border radius: 8 px
- Hover effect: Darker
- Preset: None
- Spacing: 20/8 px
Food / Organic store
- Style 1: Accent 1 background (green), Background text (white)
- Border radius: 100 px (pill)
- Hover effect: Scale
- Preset: Bubble
- Spacing: 16/8 px
Vintage / Handmade store
- Style 1: Accent 1 background (warm color), Background text (white)
- Border radius: 0 px (square)
- Hover effect: Darker
- Preset: Brick
- Spacing: 16/6 px
- Border: On, 2px, Text
Kids / Toys store
- Style 1: Accent 1 background (bright color), Background text (white)
- Border radius: 100 px (pill)
- Hover effect: Scale or Paint
- Preset: Bubble
- Spacing: 24/10 px
Complete settings reference
| Setting | Type | Range/Options | Default |
|---|---|---|---|
| Font | Select | Heading / Body | Heading |
| Font size | Range | 80-130% | 100% |
| Horizontal spacing | Range | 4-40 px | 16 px |
| Vertical spacing | Range | 4-40 px | 4 px |
| Border radius | Range | 0-100 px | 10 px |
| Border | Checkbox | On / Off | Off |
| Border thickness | Range | 1-5 px | 1 px |
| Border color | Select | Darker / Lighter / Text / Subtle | Darker |
| Bold | Checkbox | On / Off | On |
| Hover translate | Checkbox | On / Off | On |
| Hover effect | Select | Darker / Lighter / Fill Slide / Scale / Paint / Magnetic | Darker |
| Style 1 background | Select | Accent 1 / Accent 2 / Text / Transparent | Accent 1 |
| Style 1 text | Select | Background / Foreground / Accent 1 / Accent 2 | Background |
| Style 2 background | Select | Accent 1 / Accent 2 / Text / Transparent | Accent 2 |
| Style 2 text | Select | Background / Foreground / Accent 1 / Accent 2 | Background |
| Style 3 background | Select | Accent 1 / Accent 2 / Text / Transparent | Transparent |
| Style 3 text | Select | Background / Foreground / Accent 1 / Accent 2 | Background |
Next steps
- Buttons (design) -- The 3 button styles in detail
- Colors -- The palettes that color your buttons
- Hover effects -- Button hover animations
- Typography -- Fonts used in buttons