How to add a download button to a Framer site

Watch on YouTube

Add a download button to your Framer site for a résumé, PDF or other file. Learn how to link a file directly or connect downloads to your CMS.

I’ll show you how to add and customise a download button in Framer, using a résumé download as an example.

Step 1: Add the Download Button

1. Open the Layers Panel
   First, locate the section of your page where you want the button—here, it’s just below a text block labeled “copy” inside an Overlay.

2. Insert the Download Button
   Click Insert → go to Utility → select Download Button, and drag it onto the page just below the copy block.

Step 2: Customize the Button

Once the button is added, you’ll see customization options in the right-hand Properties panel:

• Text: Change the button label to something like “Download Resume”.

• Source: You can choose from:

  • Uploaded File

  • URL

  • CMS (for dynamic linking)

If you don’t see the CMS options, make sure your button is inside a Collection—Framer’s way of managing dynamic content.

Step 3: Adjust Styles

You can fully customize the appearance of the button:

• Font: Change the font family and size.

• Icon: Use the default icon or upload a custom one.

• Color & Fill: Set the background color, text color, and icon color (in the example, a white button with black text/icon).

• Border Radius: Soften the edges to match your site style.

• Hover State: Add hover effects like removing the fill and changing text color for interactive feedback.

• Transitions: Tweak the animation timing for smooth effects.

Step 4: Connect to CMS (Optional but Powerful)

If you’re using CMS and want to link the download button dynamically:

1. Go to CMS → Edit Fields

2. Add a new Content Field of type “File”

3. Name the field (e.g., resume)

4. Choose the allowed file extension (e.g., .pdf)

5. Upload the file to the new field

6. Return to your canvas and connect the download button to this CMS file

Note: On the Free Plan, file uploads have a size limit (5MB).

Final Step: Preview and Publish

• Use Preview to test the download functionality.

• Click Publish when you’re ready to go live.

• The file will download as expected, although note: file names are auto-generated. If you need a specific file name, consider using a third-party hosting solution or a custom download component.

Watch the full walkthrough video above for a visual guide through every step.

Get the template

Try Framer for free

Hire a Framer Expert

Thanks for visiting Design Chillout! Explore the designer toolkit or grab something from the cooler box!

Affiliate Disclaimer:
This page contains affiliate links. Site content is supported by awesome visitors like you who buy after clicking on a link, at no extra cost to you.

AI disclaimer:
This article contains original content. However, AI may have been used to generate content from existing sources, or to correct the grammar, spelling, and formatting.