← Back to Documentation

Buttons and Links

Buttons guide visitors to take action. This guide covers creating button blocks, styling options, and link configuration.

Adding a Button

Create Button Block

  1. Open the block palette (press B)
  2. Select Button
  3. Click to place on your canvas
  4. Enter your button text

Quick Button

Double-click on canvas and type to create a quick button.

Button Text

Writing Effective Text

Button text should be:

  • Action-oriented - "Get Started", "Learn More"
  • Clear - Tell users what happens
  • Concise - 2-4 words ideal

Examples

| Good | Avoid | |------|-------| | View Portfolio | Click Here | | Contact Me | Submit | | Download PDF | Button | | Start Free Trial | More Info |

Editing Text

  1. Double-click the button
  2. Edit the text
  3. Click outside to finish

Button Styles

Style Presets

| Style | Appearance | Use For | |-------|------------|---------| | Solid | Filled background | Primary actions | | Outline | Border only | Secondary actions | | Ghost | Text only | Subtle actions | | Link | Underlined text | Inline navigation |

Changing Style

  1. Select the button
  2. Open the Style tab
  3. Choose your preset
  4. Customize as needed

Button Properties

Size

| Size | Use Case | |------|----------| | Small | Inline, cards | | Medium | Standard buttons | | Large | Hero sections, CTAs | | Custom | Specific dimensions |

Colors

Customize button colors:

  • Background - Fill color (solid style)
  • Text - Label color
  • Border - Outline color
  • Hover - Color on mouse over

Border Radius

Control corner rounding:

  • None - Sharp corners (0px)
  • Small - Slightly rounded (4px)
  • Medium - Noticeably rounded (8px)
  • Large - Very rounded (16px)
  • Pill - Fully rounded (999px)

Padding

Adjust internal spacing:

  • Horizontal - Left/right padding
  • Vertical - Top/bottom padding
  • Custom - Different for each side

Link Configuration

Adding a Link

  1. Select the button
  2. Open Link settings
  3. Enter the URL or select a page
  4. Configure options

Link Types

| Type | Format | Example | |------|--------|---------| | External URL | https://... | https://example.com | | Internal page | /page-name | /about | | Email | mailto:... | mailto:hello@example.com | | Phone | tel:... | tel:+1234567890 | | Anchor | #section | #contact | | File | File URL | /documents/menu.pdf |

Link Options

| Option | Description | |--------|-------------| | Open in new tab | Opens link in new window | | No follow | SEO: don't follow link | | Download | Prompt file download |

Email Links

Create email links:

  1. Enter: mailto:your@email.com
  2. Optional subject: mailto:email@example.com?subject=Hello
  3. Button opens email client

Phone Links

Create click-to-call:

  1. Enter: tel:+1234567890
  2. Include country code
  3. Button initiates call on mobile

Button States

Hover State

Customize appearance when mouse hovers:

  • Background color change
  • Scale up (zoom effect)
  • Shadow addition
  • Color shift

Active State

When button is clicked:

  • Pressed appearance
  • Color change
  • Scale down slightly

Disabled State

For inactive buttons:

  • Grayed out appearance
  • Cursor change
  • No click action

Icons in Buttons

Adding Icons

  1. Select the button
  2. Open Icon settings
  3. Choose from icon library
  4. Position left or right

Icon Options

| Setting | Options | |---------|---------| | Position | Left, Right | | Size | Match text, custom | | Color | Match text, custom | | Gap | Space between icon and text |

Common Button Icons

| Action | Icon | |--------|------| | External link | Arrow up-right | | Download | Arrow down | | Email | Envelope | | Next | Arrow right | | Play | Play triangle |

Button Groups

Creating Groups

For related actions:

  1. Place buttons near each other
  2. Select all buttons
  3. Group for unified control

Group Styling

  • Horizontal - Side by side
  • Vertical - Stacked
  • Gap - Space between buttons
  • Alignment - Left, center, right

Responsive Buttons

Mobile Considerations

Buttons on mobile should be:

  • Large enough to tap (44px minimum)
  • Full-width for primary actions
  • Properly spaced

Responsive Settings

Configure per breakpoint:

  • Size adjustment
  • Stack vertically on mobile
  • Centered alignment

Best Practices

Button Hierarchy

Use visual hierarchy:

  1. Primary - Main action (solid, prominent)
  2. Secondary - Alternative action (outline)
  3. Tertiary - Minor action (ghost/link)

Placement

Optimal button placement:

  • Above the fold for CTAs
  • End of content sections
  • Clear visual separation
  • Consistent across pages

Accessibility

Make buttons accessible:

  • Descriptive text (not "Click Here")
  • Sufficient color contrast
  • Keyboard navigable
  • Focus indicator visible

Common Patterns

Hero CTA

Style: Solid, Large
Color: Primary brand color
Text: "Get Started" or "Learn More"
Position: Center or left-aligned

Form Submit

Style: Solid, Medium
Color: Success green or primary
Text: "Submit", "Send", "Sign Up"
Position: Below form fields

Navigation Button

Style: Ghost or Link
Color: Matches navigation
Text: "View All", "See More"
Position: Inline with content

Troubleshooting

Button not clickable

  1. Check link is configured
  2. Verify no overlapping elements
  3. Check button is published

Link goes to wrong page

  1. Verify URL is correct
  2. Check for typos
  3. Use absolute URL for external

Style not applying

  1. Check no conflicting CSS
  2. Verify settings saved
  3. Try republishing

Next Steps

Buttons and Links - Salon Docs