Layout Settings

Width

May differ slightly from the actual interface.

Key Point:
Set the element's width. Using min/max together improves layout stability.

What this changes:
Particularly important when the button text length varies in production.

Adjustment tips:
Define min-width first, then adjust width / max-width to prevent layout breakage.

Settings

• Use width: Toggle width settings on or off, applying a fixed width only when needed.
• Width + unit (px / % / vw / vh / fit-content): Set the width and unit to control how the element expands based on content.
• Use min width / Min Width + unit: Set a minimum width to prevent the button from collapsing on short text.
• Use max width / Max Width + unit: Set a maximum width to prevent excessive horizontal expansion on long text.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Selecting fit-content as the unit causes the button width to automatically adjust to match the text length. The % unit is relative to the parent element's width. Combining min/max prevents extreme width variations while maintaining a flexible layout.

Height

May differ slightly from the actual interface.

Key Point:
Set the element's height. This controls the balance between text lines and decorative elements.

What this changes:
Insufficient height makes the button feel cramped, while too much height makes it feel stretched.

Adjustment tips:
Start by setting the minimum height, and use a fixed height only when specifically needed to maintain flexibility.

Settings

• Use height: Toggle height settings on or off, applying a fixed height only when needed.
• Height + unit (px / % / vw / vh): Set the height and unit to adjust the element's density.
• Use min height / Min Height + unit: Set a minimum height to ensure a comfortable tap area.
• Use max height / Max Height + unit: Set a maximum height to prevent excessive vertical stretching.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Setting a strict fixed height may cause content overflow when the text increases. If a fixed height is needed, use min-height instead so the element can grow with content. A minimum height of 44px is recommended for tap targets (WCAG Touch Target Guidelines).

overflow: hidden impact:
The button body, content area, thumbnail, band, and background all have overflow: hidden applied. As a result, content is clipped to match the Border Radius settings. Be aware that large shadows or transformations extending beyond the element will be clipped by overflow: hidden (frame animations neon-01 / glow-01 are exceptions and switch to overflow: visible).

Margin

May differ slightly from the actual interface.

Key Point:
Set the outer spacing of the element. This is the primary setting for controlling distance from surrounding elements.

What this changes:
Proper spacing improves content grouping and visual flow.

Adjustment tips:
Establish the vertical spacing rules first, then apply them to each button for a cohesive page layout.

Settings

• Use Individual Settings: Switch from a uniform value to individual top/right/bottom/left values for detailed control.
• Uniform: Margin + unit (px / % / vw / vh / auto): Apply the same outer spacing in all four directions for quick alignment.
• Individual: Margin Top / Right / Bottom / Left + unit: Adjust spacing per direction to optimize the distance from surrounding elements.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Using auto enables horizontal centering (e.g., Margin Left: auto + Margin Right: auto). Using vw / vh units makes the spacing relative to the viewport, providing automatic spacing adjustments based on screen width.

Padding

May differ slightly from the actual interface.

Key Point:
Set the inner spacing of the element. This prevents text and icons from appearing cramped.

What this changes:
Directly affects tap area size and ease of pressing.

Adjustment tips:
On mobile, vertical spacing shortages are especially common, so set slightly more generous values than on PC as your baseline.

Settings

• Use Individual Settings: Switch from a uniform value to individual top/right/bottom/left values for detailed control.
• Uniform: Padding + unit (px / % / vw / vh): Apply the same inner spacing in all four directions for consistent button density.
• Individual: Padding Top / Right / Bottom / Left + unit: Adjust inner spacing per direction to relieve crowding between text and icons.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Position

May differ slightly from the actual interface.

Key Point:
Set the element's placement position. Control overlap and distance relative to surrounding elements.

What this changes:
Position settings have a wide impact and can cause layout issues if used incorrectly.

Adjustment tips:
Start with relative positioning first, and use absolute positioning only where specifically needed for easier maintenance.

Settings

• Position Type (relative / absolute): Select the positioning method — normal flow or absolute placement.
• Top / Right / Bottom / Left (Auto / Value) + unit: Set directional offsets to fine-tune the position.
• Z-Index (Auto / Value): Set the stacking order to control the front-to-back layering of elements.
• Transform Translate X / Y + unit: Set X/Y translation to make visual position adjustments.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Selecting absolute positions the element relative to its nearest ancestor with position: relative. The element is removed from the normal document flow, making it suitable for overlapping effects, but be careful of misalignment on different devices. Transform Translate operates independently from position and only shifts the element's visual rendering position.

Layer Order

May differ slightly from the actual interface.

Key Point:
Set the stacking order of each layer. Control the front-to-back relationship of Background, Band, Thumbnail, and Content.

What this changes:
Resolves issues where text is unintentionally hidden behind other layers.

Adjustment tips:
Start by pinning Content to the front, then arrange the decorative layers behind it to minimize issues.

Settings

• Content: Set the Content layer stacking order to keep text and key information at the front.
• Thumbnail: Set the Thumbnail layer stacking order to ensure the image does not obscure the text.
• Band: Set the Band layer stacking order to control the decorative band's front-to-back placement.
• Background: Set the Background layer stacking order to keep it stable as the base of the design.

Layer Order is controlled via CSS z-index. Higher values appear in front. Default values are Background: 0, Band: 5, Thumbnail: 10, Content: 20. If unexpected overlapping occurs, check this setting first.

Internal fixed z-index values:
Within the Content layer, the icon is fixed at z-index: 25 and text at z-index: 30. The inner shadow ::after pseudo-element is at z-index: 100, and frame animations are at z-index: 1001. These values cannot be changed through the Layer Order settings.

Related FAQ

• 提升點擊率（CTR）的設定順序 – ZenBlocks buttonBasic
• 裝置別設定沒有生效時的檢查方式 – ZenBlocks buttonBasic