Button Block
A styled link button with full control over colors, hover states, typography, icon, border, radius, shadow, and an optional underline animation. Renders as <a> when a URL is set.
BUTTON STYLES
When to use this block
- Primary and secondary call-to-action buttons
- Ghost/outline buttons with border and transparent background
- Text links with arrow icons and underline hover effects
- Full-width buttons in cards or narrow containers
Colors & Hover
Set text and background colors with separate hover states. Background supports solid color or CSS gradient.
Colors
Sidebar Panel
Text Color
#FFFFFF
Background
#171717
Hover Text
#FFFFFF
Hover Background
#3D3D3D
TRY HOVERING
Typography
Font size, letter spacing (responsive), and font weight (toolbar). All values in px.
Typography
Sidebar Panel
Font Size
px
Letter Spacing
px
Font Weight
WEIGHT OPTIONS
Light
300
Normal
400
Medium
500
Semi-Bold
600
Bold
700
Extra-Bold
800
6 weights (300–800). Same as Paragraph Block.
Icon
Add an icon to the left or right of the label. Upload an SVG for recoloring support, or use any image format.
Icon
Sidebar Panel
Icon
Position
Width
px
Height
px
Color
#FFFFFF
Hover Color
#D1D1D1
ICON POSITIONS
Default position
SVG icons support iconColor and iconHoverColor via CSS. Non-SVG images display as-is.
Full Width
Stretch the button to fill its container. Text is centered automatically.
Width
Full Width
Inline (default)
Full width
Underline Animation
Add a sliding underline that appears on hover. Control its color and thickness.
Animation
Sidebar Panel
Animation
Color
#171717
Height
px
Border, Radius & Shadow
Per-corner radius (responsive), per-side borders with hover color, and shadow presets. Applied to the inner link element.
Border Radius
Per-corner objects, responsive across 3 breakpoints. Use 999px for pill-shaped buttons.
Border & Shadow
Border width, color, and hover border color. Shadow presets: sm through 2xl, plus inner. Shadow takes priority over border.
Padding
Inner spacing in pixels. Responsive across breakpoints. Controls the button’s physical size — applied to the <a> element, not the outer wrapper.
SIZE VIA PADDING
Responsive: Mobile Tablet Desktop
All Available Controls
Content & Link Label text, URL, target
content: button label (RichText). url: link href — if empty, renders as <div> instead of <a>. linkTarget: "_blank" for new tab. rel: auto-set.
Colors Text, background, gradient + hover states
textColor / hoverTextColor, backgroundColor / hoverBackgroundColor, backgroundGradient (overrides solid color). All applied to the inner .button-block-link.
Typography Font size, weight, letter spacing
fontSize / letterSpacing (+Md/Lg): responsive, px. fontWeight: 300–800 (6 values), via toolbar.
Icon Left/right, SVG recoloring, size
iconUrl / iconId: uploaded image. iconPosition: "left" or "right". iconWidth / iconHeight: px. SVG icons: iconSvgContent rendered inline, iconColor / iconHoverColor applied via CSS.
Full Width Stretch to fill container
isFullWidth: true → flex w-full justify-center. false → inline-flex (default).
Animation Underline hover effect
animation: "underline" or empty. underlineColor: hex (default currentColor). underlineHeight: px (default 2). Sliding bar via ::after pseudo-element.
Border & Shadow Per-corner radius, border, shadow presets
Radius: borderRadiusMobile/Tablet/Desktop (per-corner). Border: borderMobile/Tablet/Desktop or legacy borderPosition + borderWidth + borderColor. hoverBorderColor. Shadow: sm–2xl, inner (takes priority over border).
Padding Inner spacing on <a>, 3 breakpoints
paddingTop/Bottom/Left/Right (+Md/Lg) in px. Applied to .button-block-link (the inner <a>), not the outer wrapper.