How to link a button to a downloadable file in Webflow?

Linking a button to a downloadable file (PDF, image, ZIP, or other document) requires uploading the file to Webflow's Assets panel and then pointing a link or button to it. With the right attribute, you can force the browser to download the file instead of opening it in a new tab.

Step 1: Upload the file

1. Open the Assets panel in the Designer.
2. Click Upload or drag the file into the panel.
3. Supported file types include PDF, ZIP, JPG, PNG, SVG, and common document formats.
4. Once uploaded, click the file and copy its URL.

Step 2: Link the button

1. Select the Button element on the canvas.
2. Open the Settings panel (gear icon).
3. Under Link, set the type to External URL.
4. Paste the asset URL from step 1.

Step 3: Force download (optional)

By default, clicking the link opens the file in the browser (especially PDFs). To force a download instead:

1. Select the button element.
2. In the Settings panel, scroll to Custom Attributes.
3. Click + Add attribute.
4. Set the attribute name to download and the value to the desired filename (e.g., guide.pdf).

This adds the HTML download attribute, which tells the browser to save the file rather than display it. Note that this only works reliably for files hosted on the same domain. Cross-origin files may still open in the browser depending on the server's CORS headers.

Using CMS file fields

If the downloadable file is part of a CMS item (e.g., each resource page has its own PDF):

1. Add a File field to your CMS Collection.
2. In the Collection template, select the download button.
3. In the Settings panel, set the link to CMS Field and choose the File field.
4. Add the download custom attribute if you want to force downloading.

Using external file hosting

If your file is hosted outside Webflow (Amazon S3, Google Drive, Dropbox):

1. Get the direct download URL from the external service.
2. Link the button to that URL as an External URL.
3. The download attribute may not work for cross-origin files. Instead, ensure the external service provides a direct download link.

For Dropbox, replace ?dl=0 with ?dl=1 in the URL to force a download. For Google Drive, use the export URL format.

Checklist

• File uploaded to Assets or CMS File field.

• Button linked to the file URL.

• download attribute added to force save behavior.

• Test on both desktop and mobile to confirm the download works.