Style Settings

Text Color

Key Point:
Set the text color and its opacity. This is the most critical setting for ensuring adequate contrast against the background.

What this changes:
If readability is insufficient, the button will get fewer clicks regardless of how good the design looks.

Adjustment tips:
Follow WCAG guidelines for contrast ratio. Pay special attention to smaller text by ensuring a strong luminance difference.

Settings

• Text Color: Set the text color to optimize contrast against the background.
• Alpha (Opacity): Adjust the text color opacity to control visual emphasis. Values range from 0 (fully transparent) to 1 (fully opaque).
• Responsive: Enable device-specific settings to accommodate different backgrounds per device.

Hover state text color can also be set independently. Color changes on hover transition smoothly according to the style Transition Duration. WCAG 2.1 recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Text Shadow

Key Point:
Add a shadow effect to the text. Useful for improving readability when text is placed over background images.

What this changes:
Shadow intensity affects the balance between visibility and decorative appearance.

Adjustment tips:
Start with a small Blur value and low Alpha, then gradually increase only as much as needed.

Settings

• Text Shadow (ON/OFF): Toggle the text shadow effect to control readability assistance.
• Color: Set the shadow color to adjust element visibility and design consistency.
• Blur + unit: Set the blur amount to control shadow spread and glow.
• Horizontal + unit: Set the horizontal offset to control shadow direction.
• Vertical + unit: Set the vertical offset to create a natural depth effect.
• Responsive: Enable device-specific settings to prevent display issues.

Text Shadow can also be configured independently for hover state. When placing text over a background image, choose a shadow color with the opposite luminance of the image (white tones for dark backgrounds, dark tones for light backgrounds) to improve readability.

Border

Key Point:
Set the border color, width, and style. Borders make the button outline clear and help users recognize it as a clickable element.

What this changes:
Even with a light background color, borders make boundaries clearly visible.

Adjustment tips:
Overly thick borders can diminish text prominence. Start with around 1px and adjust from there.

Settings

• Border (ON/OFF): Toggle the border to control outline emphasis.
• Color + Alpha: Set color and opacity together to control visibility and prominence.
• Width: Set the border width to adjust the visible outline.
• Style (none / solid / dashed / dotted): Choose the line style to adjust the decorative tone.
• Box Sizing (border-box / content-box): Switch the sizing model to prevent layout shifts.
• Responsive: Enable device-specific settings to prevent display issues.

When border-box is selected, border width is included in the element's width and height, so adding a border does not shift the layout. With content-box, the element's total size increases by the border width. Hover state border can also be set independently.

Border Radius

Key Point:
Set the corner roundness. This adjusts the brand tone (formal vs. friendly) at a visual impression level.

What this changes:
The perceived roundness varies based on the ratio between the border radius and the button size.

Adjustment tips:
Using approximately 20-35% of the button height as the radius typically produces a balanced look that is neither too round nor too sharp.

Settings

• Use Individual Settings: Switch from a uniform value to individual values for each corner for detailed control.
• Uniform: Border Radius + unit: Apply the same radius to all four corners for quick consistency.
• Individual: Border Radius Top Left / Top Right / Bottom Right / Bottom Left + unit: Set different radius values per corner to create intentional shape accents.
• Unit: Choose from px / % / em / rem.
• Responsive: Enable device-specific settings to prevent display issues.

Setting 50% creates a circle (when the element is square) or an ellipse. Hover state border radius can also be set independently, enabling shape-change effects on hover.

Inner Shadow

Key Point:
Set an inward shadow effect. This creates a pressed or inset appearance to add depth.

What this changes:
Useful for adding subtle dimension to flat designs.

Adjustment tips:
Overdoing it can make the UI look dated. Keep Blur and Alpha on the low side as a baseline.

Settings

• Inner Shadow (ON/OFF): Toggle the inset shadow to control the pressed-in appearance.
• Color: Set the shadow color to adjust element visibility and design consistency.
• Blur: Adjust the blur amount to control shadow intensity and spread.
• Horizontal: Adjust the horizontal offset to set shadow direction.
• Vertical: Adjust the vertical offset to create a natural depth effect.
• Spread: Set the shadow spread to control outline expansion.
• Responsive: Enable device-specific settings to prevent display issues.

Inner Shadow is output as CSS box-shadow: inset. Hover state inner shadow can also be set independently, making it well-suited for press-effect animations. The inner shadow is rendered via a ::after pseudo-element inside the button, so it is correctly clipped to match the Border Radius setting.

Shadow

Key Point:
Set an outer shadow effect. This lifts the button off the background and strengthens visual focus.

What this changes:
Shadow direction and distance determine the perceived depth of the element.

Adjustment tips:
Shadows tend to appear stronger on mobile, so consider reducing the intensity by one level in the SP tab.

Settings

• Shadow (ON/OFF): Toggle the outer shadow to control the floating appearance.
• Color + Alpha: Set color and opacity together to control visibility and prominence.
• Blur: Adjust the blur amount to control shadow intensity and spread.
• Horizontal: Adjust the horizontal offset to set shadow direction.
• Vertical: Adjust the vertical offset to create a natural depth effect.
• Spread: Set the shadow spread to control outline expansion.
• Responsive: Enable device-specific settings to prevent display issues.

Opacity

Key Point:
Set the overall element opacity and blend mode. This controls how the button interacts visually with its background.

What this changes:
Even with the same colors, adjusting Opacity and Blend Mode can dramatically alter the visual impression.

Adjustment tips:
If readability decreases, correct the text color and background contrast first, then adjust Opacity.

Settings

• Opacity: Set the element opacity to control overall visibility.
• Mix Blend Mode: Set the blend mode to control how the element blends with the background. Common values: normal / multiply (Multiply) / screen (Screen) / overlay (Overlay).
• Responsive: Enable device-specific settings to prevent display issues.

Lowering Opacity affects all child elements (text, icons, etc.). If you want to make the background transparent while maintaining text readability, adjusting the Alpha in Background Settings is more effective than lowering the button's Opacity. Hover state opacity can also be set independently.

Blend Mode limitation:
When multiple layers (background, thumbnail, band) each have their own Blend Mode, browser compositing order may produce unexpected color results. It is recommended to configure Blend Mode one layer at a time and verify the result.

Transition

Key Point:
Set the transition speed from normal state to hover state. This determines how responsive and satisfying the interaction feels.

What this changes:
Too fast and users may not notice the change; too slow and the interaction feels sluggish.

Adjustment tips:
Start with a Duration of 200-350ms as a baseline, and only add delays or custom easing for elements that need extra emphasis.

Settings

• Duration (ms): Set the transition duration to control how quickly the change occurs.
• Delay (ms): Set a delay before the transition starts to fine-tune animation timing.
• Easing: Set the speed curve to shape the feel of the motion. Options: ease / ease-in / ease-out / ease-in-out / linear / Custom.
• Custom Value: Specify a custom easing value (CSS cubic-bezier format) for precise control over hover transition timing.
• Reset: Reset this section's settings to their default state.
• Text Animation notice: When Text Animation is active, a notice appears to help avoid conflicts.

This transition applies to hover state changes for all properties within the Style Settings panel, including Text Color, Border, Border Radius, Shadow, Inner Shadow, and Opacity. Background and Icon transitions are configured independently within their respective panels. When using Text Animation in combination, transitions may interfere with each other, so carefully adjust Duration and Delay.

Transition target property limitation:
Internally, only color, text-shadow, border, border-radius, box-shadow, and opacity are included as transition targets. background (background color and gradients) and transform are not covered by this transition and are controlled by their dedicated transition settings. Changes to width / height are also not transitioned here.

Related FAQ

• Hover 樣式沒有生效 – ZenBlocks buttonBasic
• 動畫不會播放 – ZenBlocks buttonBasic