Working with Buttons and Links

Buttons and links drive user actions on your site. Here's how to add and configure them.

Adding Button Blocks

Standard Button

Click "+" to add content

Go to Basic Blocks tab

Select Button from the General section

Customize text and styling

Copy Button

A special button that copies text to clipboard:

Click "+" to add content

Go to Basic Blocks tab

Select Copy button

Set the text to copy (email, phone, code, etc.)

Great for: Contact information, referral codes, sharing links.

Button Settings

Click on a button and open settings to configure:

Text

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

• ✅ "Get Started", "Learn More", "Buy Now"
• ❌ "Click Here", "Button", "Submit"

Link

Where the button takes users when clicked.

Size

Choose from available sizes for your design needs.

Colors

• Background Color - Button fill color
• Border Color - Outline color
• Text Color - Label color

Border

• Border Width - Thickness of outline
• Border Radius - Corner roundness

Icons

Add icons before or after button text:

• Start Icon - Appears before text
• End Icon - Appears after text

Link Types

Framekit supports several link types:

Internal Pages

Link to other pages on your site:

• Select from your page list
• Uses page ID (won't break if page is renamed)
• Example: Links to your About page

External URLs

Link to external websites:

• Enter full URL: https://example.com
• Opens in new tab (configurable)
• Example: Links to social media

Email (mailto)

Opens user's email client:

• Format: mailto:email@example.com
• Can include subject: mailto:email@example.com?subject=Hello
• Example: "Email Us" button

Phone (tel)

Opens phone dialer on mobile:

• Format: tel:+1234567890
• Include country code
• Example: "Call Now" button

Section Anchors

Scroll to a section on the same page:

• Link to AI components with scroll section names
• Smooth scroll effect
• Example: "Jump to Pricing" button

Navigation Bar Buttons

Add CTA buttons to your navigation:

Adding Nav Buttons

Look at your navigation bar

Find the "Add button" placeholder on the right side

Click to add a button

Configure text, link, and style

Navigation Button Uses

• "Get Started" - Main CTA
• "Sign Up" - Registration
• "Contact" - Inquiry
• "Book a Call" - Scheduling

You can add up to 2 buttons in the navigation bar.

Open in New Tab

When to Use

• External links (other websites)
• PDF downloads
• Social media links

When NOT to Use

• Internal page links
• Email links
• Phone links
• Section anchors

Setting New Tab

Open button/link settings

Find "Open in new tab" option

Toggle on for external links

Button Styling Tips

Make CTAs Stand Out

• Use contrasting colors
• Make primary CTA larger
• Position prominently

Maintain Consistency

• Use same style for similar actions
• Keep border radius consistent
• Match your theme colors

Mobile Considerations

• Ensure buttons are tap-friendly (44px minimum)
• Test touch targets
• Consider full-width on mobile

AI-Generated Buttons

Ask AI to create styled buttons:

"Add a blue button that says 'Start Free Trial' with rounded corners"

"Create two buttons side by side: 'Learn More' (outline) and 'Sign Up' (filled)"

"Add a button that opens email to support@mysite.com"

Troubleshooting

Button Not Clickable

• Check if link is set
• Verify link format is correct
• Test in published site (some links don't work in editor)

Link Going to Wrong Place

• Verify the link URL/page selection
• Check for typos in external URLs
• Ensure page exists for internal links

Copy Button Not Working

• Test in published site
• Check browser permissions for clipboard access
• Verify copy text is set