Skip to main content

Button Element

The Button element creates clickable call-to-action buttons. Use it for form submissions, links, closing the popup, and any interactive action.

Overview​

PropertyValue
Element Typebutton
Can Contain ChildrenNo
InteractiveYes

Use Cases​

  • Call-to-action buttons ("Subscribe", "Get Started")
  • Form submission buttons
  • Close popup buttons
  • Link buttons to external URLs
  • Download buttons

Content Settings​

Button Text​

The text displayed on the button. Keep it action-oriented:

  • ✅ "Get Started"
  • ✅ "Subscribe Now"
  • ✅ "Download Free Guide"
  • ❌ "Click Here"
  • ❌ "Submit"

Where the button links to:

Link TypeExample
URLhttps://example.com
Emailmailto:hello@example.com
Phonetel:+1234567890
Anchor#section-id

How the link opens:

OptionDescription
Same WindowOpens in current tab
New WindowOpens in new tab (target="_blank")

Button Action​

Special button actions:

ActionDescription
LinkNavigate to URL
Close PopupClose the current popup
Submit FormSubmit parent form (if in form)

Style Settings​

Button Style​

Pre-configured button styles:

StyleDescription
SolidFilled background
OutlineBorder only, transparent background
GhostNo border, transparent background
GradientGradient background

Background Color​

For solid and gradient styles, set the background color(s).

Text Color​

Color of the button text.

Border​

Configure button border:

PropertyDescription
WidthBorder thickness
ColorBorder color
StyleSolid, dashed, dotted
RadiusCorner roundness

Common radius values:

  • 0px — Square corners
  • 4px — Slightly rounded
  • 8px — Rounded
  • 9999px — Pill shape

Size​

Control button size:

PropertyDescription
PaddingInternal spacing
WidthButton width (auto, full, fixed)
Min WidthMinimum button width

Typography​

Button text styling:

PropertyDescription
Font FamilyButton font
Font SizeText size
Font WeightText boldness
Letter SpacingCharacter spacing
Text TransformUppercase, lowercase, etc.

Hover Effects​

Style changes on mouse hover:

PropertyDescription
Background ColorHover background
Text ColorHover text color
Border ColorHover border color
TransformScale, translate effects

Shadow​

Add depth with box shadow:

PropertyDescription
X OffsetHorizontal shadow position
Y OffsetVertical shadow position
BlurShadow blur radius
SpreadShadow spread
ColorShadow color

Icon Settings​

Add an icon to your button:

Icon Position​

OptionDescription
Before TextIcon on the left
After TextIcon on the right
Icon OnlyNo text, just icon

Icon Selection​

Choose from Font Awesome icons:

  • Solid icons
  • Regular icons
  • Brand icons

Icon Size​

Set icon size relative to text or in pixels.

Icon Spacing​

Space between icon and text.

Layout Settings​

Button Alignment​

Position the button within its container:

OptionDescription
LeftAlign to left
CenterCenter horizontally
RightAlign to right
StretchFull width

Margin​

Space around the button.

Advanced Settings​

HTML ID​

Custom ID for targeting:

#cta-button {
  animation: pulse 2s infinite;
}

CSS Classes​

Add custom classes.

Disabled State​

Disable the button (grayed out, not clickable).

Full Width​

Make button stretch to full container width.

Examples​

Primary CTA Button​

Subscribe Now

Settings:

  • Background: #4F46E5 (indigo)
  • Text Color: #ffffff
  • Font Size: 16px
  • Font Weight: 600
  • Padding: 12px 32px
  • Border Radius: 8px
  • Hover Background: #4338CA

Outline Button​

Learn More →

Settings:

  • Style: Outline
  • Border: 2px solid #4F46E5
  • Text Color: #4F46E5
  • Background: transparent
  • Border Radius: 6px
  • Hover Background: #4F46E5
  • Hover Text: #ffffff

Pill Button with Icon​

🚀 Get Started

Settings:

  • Icon: rocket (before text)
  • Background: linear-gradient(135deg, #667eea, #764ba2)
  • Text Color: #ffffff
  • Border Radius: 9999px
  • Padding: 14px 28px

Close Button​

No Thanks

Settings:

  • Action: Close Popup
  • Style: Ghost
  • Text Color: #64748b
  • Font Size: 14px
  • Hover Text Color: #334155

Best Practices​

  1. Action-oriented text — Use verbs ("Get", "Start", "Download")
  2. Visual hierarchy — Primary button should stand out
  3. Adequate size — Make buttons easy to tap on mobile (44px+ height)
  4. Hover feedback — Always include hover state changes
  5. Contrast — Ensure text is readable on background
  6. One primary CTA — Avoid competing buttons
  • Text — Supporting copy for buttons
  • Heading — Headlines above CTAs
  • Icon — Standalone icons