How to Style Buttons

Customize how buttons look across your entire website.

Accessing Button Settings

1. Open your website in the editor
2. Click Settings tab
3. Go to Theme section
4. Find Buttons & Links area

Button Properties

Roundness

Control corner radius:

• None: Square corners (0px)
• Small: Slightly rounded (4px)
• Medium: Moderately rounded (8px)
• Large: Very rounded (16px)
• Full: Pill shape (9999px)

Button Color

Background color of buttons:

• Click color swatch
• Select or enter hex code
• Preview updates automatically

Button Hover Color

Color when mouse hovers:

• Usually slightly darker/lighter
• Creates interactive feedback

Button Text Color

Text inside buttons:

• Ensure contrast with background
• Usually white or dark

Border Thickness

Button border width:

• None: No border (0px)
• Thin: Subtle border (1px)
• Medium: Visible border (2px)
• Thick: Bold border (3px)

Border Color

Color of button border:

• Often matches button color
• Or contrasting color

Link Styling

Link Color

Color of text links:

• Usually matches primary color
• Should be distinguishable from regular text

Link Hover Color

Color when hovering over links:

• Often darker shade
• Or underline appears

Best Practices

• Keep button styles consistent
• Ensure sufficient contrast
• Test hover states
• Make buttons look clickable
• Consider accessibility

Preview Changes

All changes preview in real-time. Check multiple pages to ensure consistency.

• Editor Overview Learn more

• AI Chat Guide Learn more