Button Block

The Button block is one of Lunasites primary action controls. Use it to move visitors to a destination, start a task, request contact, download a resource, or support a conversion.

A Button combines its label and destination with optional icons, responsive alignment, layout choices, entrance animation, and independent Default and On Hover styling.

Properties

Button Text

The visible label and the control’s accessible name. Use action-specific wording that remains understandable outside the surrounding paragraph, such as “View pricing”, “Download report”, or “Contact sales”.

URL

URL defines what happens when the Button is activated. Enter a supported destination directly or select Browse to open the LunaSites link picker.

Under External Link, select Website for an external URL, Email for a mailto action, or Phone for a tel action. The selected type displays the corresponding input, and Apply Link confirms the destination.

Open in new tab is independent from URL. Use it primarily for external websites or downloadable resources that visitors may want to keep open beside the current page.

Under Site Pages, browse the site hierarchy and select an entire page, a section, or a specific block. Lunasites creates the correct internal path and anchor automatically.

Grid and inline contexts

In a grid section, the block frame controls placement and width, while the rendered Button height follows its label, padding, icon, and border.

In inline content, the Button participates in the article flow instead of using grid coordinates. Size provides Small (compact), Medium (default), and Large (prominent), while responsive alignment positions the control within the content column.

Choose the smallest size that preserves a comfortable target and the visual hierarchy of the surrounding content. Avoid enlarging a grid frame only to create empty section space.

Layout and icons

Responsive alignment

Desktop, Tablet, and Mobile each support Left, Center, or Right alignment. Tablet inherits Desktop until it receives an override; Mobile inherits Tablet, then Desktop. Alignment controls the button inside inline content, while grid placement remains defined by the block frame.

Show Icon

Enables the icon-specific fields. The icon picker includes directional arrows, navigation symbols, communication icons, file actions, social marks, and interface symbols. The text label remains the primary accessible name.

Icon Position

Left works well when the icon identifies the action, such as download, mail, home, or phone. Right is appropriate for progression or destination cues, such as arrow-right, chevron-right, or external-link.

Icon Layout

Inline keeps the icon immediately beside the label. Wide adds more separation while preserving a compact control. Spread places the label and icon at opposite edges of the available button width and is intended for deliberately wider CTA frames.

Icon styling

In Style Panel, change Area from Button to Icon to control icon color, size, and stroke width. The Icon target also supports hover typography, transform, and transition settings without changing the label treatment.

Style Panel

Style Panel defines the Button’s reusable visual system. The control order is significant: select a Style Preset, choose the Area, choose a responsive breakpoint, then choose Default or On Hover. Each state exposes only the sections supported by that target.

Style Preset

Default Theme is the site-wide Button baseline. A custom preset is a class-like reusable treatment for repeated button styles; assign the same preset to multiple Button blocks and edit the preset once. Per-block Style Panel values remain appropriate for deliberate exceptions.

Area

Button styles the complete control and exposes Spacing, Background, Borders, Typography, and Effects. Icon isolates the icon and exposes its color, size, and stroke width; on hover it can also receive Transform and Transition values independently from the label.

Desktop, Tablet, and Mobile

Desktop is the source of paint such as background and text color. Tablet and Mobile inherit those values while allowing responsive dimensions such as padding, border width, font sizing, and icon gap where the panel exposes them. Explicit overrides appear only after that breakpoint is changed.

Default state

Spacing controls four-sided padding and Icon Gap. Background supports solid color, gradient, visual effects, and opacity. Borders controls paint, width, line style, and uniform or per-corner radius. Typography controls label color, family, size, and weight. Effects adds shadow, glow, and the Button-specific solid offset backplate.

On Hover state

On Hover can change background color or gradient, brightness, border paint or fill animation, typography, shadow and glow, scale, horizontal or vertical translation, and transition duration or timing. Use a small number of coordinated changes so the target does not shift away from the pointer.

Motion

Entrance animation

Advanced supports Fade, Slide, Reveal, Zoom, Blur, Pop, and Flip entrances. Duration ranges from 0.1 to 2 seconds, Delay from 0 to 1 second, and Easing includes Smooth, Gentle, Snappy, Soft Spring, and Bouncy Spring.

Hover motion

Hover Transform is separate from entrance animation. Scale and Translate X/Y define the end state; Transition controls how quickly the Button reaches it. Keep the distance small and the duration immediate so the interaction remains stable.

Style presets are the reusable unit: define one shared Button treatment in Site Design, assign it wherever that treatment is needed, and keep per-block Style Panel overrides for intentional exceptions.

Property summary

Button Text — visible label and accessible name.

URL — internal page, external address, mail, phone, or another supported destination.

Open in new tab — destination behavior; independent from URL.

Responsive Alignment — Left, Center, or Right for Desktop, Tablet, and Mobile.

Show Icon / Icon — enables and selects an icon from the picker.

Icon Position — Left or Right.

Icon Layout — Inline, Wide, or Spread.

Size — Small, Medium, or Large in inline content.

Responsive behavior

The grid Button is content-driven: its default frame is 4 columns by 2 rows, but the rendered height follows label wrapping, padding, icon size, and border. Desktop, Tablet, and Mobile layouts can position the block independently.

Test the shortest and longest real labels at each breakpoint. A button may become taller when a label wraps, but a routine CTA should not become an oversized visual panel. Wide frames should be intentional and usually pair with Spread icon layout.

Accessibility

• Use a descriptive label that still makes sense without surrounding copy.

• Preserve readable text, icon, border, and background contrast in Default and On Hover states.

• Do not rely on color or an icon alone to communicate the action.

• Keep keyboard focus visible. On Hover is pointer-specific and must not replace focus feedback.

• Keep the touch target comfortable and avoid transforms that move the target away from the pointer.

• Make downloads, external destinations, and new-tab behavior clear from the label or nearby text.

• Keep entrance and hover motion restrained and verify the experience with reduced-motion preferences.