SScale Themedocs
FR

Scale Theme's complete button system with 3 styles, 6 hover effects, 5 decoration presets, and global customization.

Button System

Scale Theme offers a complete button system with 3 distinct styles, 6 hover effects, 5 decoration presets, and deep global customization. All buttons in the theme share these settings.

3 Button Styles

Every section that uses a button lets you choose between 3 styles. The styles are configured globally in Theme Settings > Buttons.

StyleTypical RoleDescription
Style 1Primary CTAMost visible button, Accent 1 color
Style 2Secondary CTAAlternative button, Accent 2 color
Style 3Subtle CTATransparent/outline button, Text color

Button Colors

Each style has its own independent color configuration:

Style 1

SettingOptionsDefault
Background colorAccent 1 / Accent 2 / Text / TransparentAccent 1
Text colorBackground / Foreground / Accent 1 / Accent 2Background

Style 2

SettingOptionsDefault
Background colorAccent 2 (or other depending on config)Accent 2
Text colorBackgroundBackground

Style 3

SettingOptionsDefault
Background colorTransparentTransparent
Text colorForegroundForeground

Global Settings

These settings apply to all buttons in the theme, regardless of style:

SettingTypeRange / OptionsDefaultDescription
FontSelectHeading / BodyHeadingFont used in buttons
Font sizeRange80-130%100%Text size scale
Horizontal spacingRange4-40px16pxLeft/right padding
Vertical spacingRange4-40px4pxTop/bottom padding
Border radiusRange0-100px10pxCorner rounding
BorderToggleOn/OffOffAdds a border to the button
Border thicknessRange1-5px1pxIf border is enabled
Border colorSelectDarker/Lighter/Text/SubtleDarkerBorder color
BoldToggleOn/OffOnBold text in buttons
💡A border radius of 0 gives square buttons (corporate style), 10px gives rounded buttons (modern style), and 50px+ gives pill buttons (friendly style). Choose one that matches your brand identity.

6 Hover Effects

The hover effect is configurable globally and applies to all buttons:

EffectDescriptionVisual Impact
DarkerBackground darkens slightlySubtle, professional
LighterBackground lightensSubtle, airy
Fill SlideA color slides in from the bottomDynamic, very visible
ScaleButton slightly enlargesInteractive, playful
PaintAnimated paint effectCreative, memorable
MagneticButton magnetically follows the cursorPremium, innovative

In addition to the hover effect, the Hover translate option adds a slight upward movement on hover (enabled by default).

ℹ️The Magnetic effect uses cursor position tracking to slightly move the button toward the mouse. It is particularly impressive on large buttons (Hero sections, CTAs) but can be disorienting on small buttons.

5 Decoration Presets

Decoration presets modify the overall appearance of buttons by adding additional visual effects:

PresetEffectIdeal For
ClassicStandard style, no decorationGeneral use, neutral
GradientSubtle gradient on the button backgroundPremium, modern
BrickThick border, retro styleVintage, artisanal, bold
GhostTransparent with thin borderMinimalist, elegant
BubbleVery rounded edges, soft effectFriendly, pop, youthful

These presets combine with styles 1/2/3 to create a wide variety of buttons:

3 styles x 5 presets = 15 possible combinations
+ 6 hover effects = nearly infinite variations
Store TypeStylePresetHoverRadius
Luxury / PremiumStyle 1 (dark)Classic or GradientDarker0-4px
Fashion / BeautyStyle 1 (accent)Ghost or ClassicFill Slide8-20px
Tech / SportsStyle 1 (vivid)BrickScale4-8px
Kids / PopStyle 1 (colorful)BubblePaint50px+
Artisanal / NatureStyle 1 (earthy)BrickLighter2-6px
MinimalistStyle 3 (outline)GhostDarker0px
💡The Fill Slide effect is particularly effective for primary CTAs. It creates a movement that catches the eye and encourages clicks. Combine it with Style 1 and a Classic preset for maximum impact.
⚠️Avoid combining the Magnetic effect with the Bubble preset on small buttons. The magnetic movement combined with very rounded edges can make the button difficult to click on mobile.
PreviousSVG SeparatorsNextHover Effects