Framer Tutorial: How to add a download button

If you're building a portfolio or site in Framer and want visitors to download your resume, PDF, or other file directly from the page—you're in luck. Framer makes it easy to add a functional download button, either linked to a file or integrated with the CMS.

This tutorial walks you through the process of adding and customizing a download button in Framer using a simple example: placing a “Download Resume” button just below some body text.

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

Affiliate disclosure:

As a Framer Partner, I may earn from qualifying plan purchases at no cost to you.

AI disclaimer:

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