How to Link a Button to Another Page in Framer

Linking a button in Framer to another page or external destination is a straightforward process performed using the element's properties panel.

Here's how you can do it:

Step-by-Step Guide to Linking Your Framer Button

Once you have added your button element to your page, you'll need to select it to access its settings. Before you link, you might want to customize the button's appearance. As shown in the provided reference, you can select the button element (often contained within a frame) and scroll down to the Styles panel to adjust properties like the background color by clicking on Fill. After styling, follow these steps to add a link:

1. Select the Button Element: In your Framer canvas, click directly on the button element you wish to link. You'll see its properties appear in the right-hand panel. Ensure you have selected the button itself, not just its parent frame or stack, although you select the frame to adjust styles like fill color as mentioned in the reference.
2. Locate the Links Section: In the right-hand properties panel, scroll down until you find the Links section.
3. Choose Your Link Type: Click on the "Link" option. A dropdown menu will appear, allowing you to select the destination type. Common options include:
   • Page: Link to another page within your Framer project.
   • External URL: Link to a website outside of your Framer project (e.g., https://www.example.com).
   • Section: Link to a specific section or element on the current page (using Section IDs).
   • Email: Open the user's email client with a pre-filled address (mailto: link).
   • Phone: Prompt the user to call a phone number (tel: link).
4. Set the Destination:
   • If you selected Page, choose the desired page from the list of pages in your project.
   • If you selected External URL, type or paste the full URL into the input field.
   • If you selected Section, choose the element ID you want the button to scroll to on click.
   • For Email or Phone, enter the email address or phone number.
5. Configure Link Settings (Optional): Below the destination field, you might see additional options depending on the link type:
   • Open in new tab: Check this box to open the link in a new browser tab (commonly used for external links).
   • Scroll to top: For internal page links, this ensures the user lands at the top of the destination page.

That's it! Your button is now linked. You can test it by previewing your site.

Common Link Types Overview

Here's a quick look at when to use different link types:

Link Type	Purpose	Example Usage
Page	Navigate between pages in your Framer site.	"About Us" button on the homepage.
External URL	Link to any website or online resource.	Link to a blog post, social media.
Section	Scroll smoothly to a part of the current page.	"Learn More" button scrolling down.
Email	Create a quick way for users to contact you.	"Email Us" button.
Phone	Allow users to call directly from mobile.	"Call Us" button.

Remember to always test your links in preview mode to ensure they are working correctly and directing users to the intended destination.