How can I make a button on my Webflow website download a PDF file without redirecting the user or opening a new tab?
TL;DR
- Upload the PDF to Webflow assets and copy its URL.
- Use a Link Block or Text Link styled as a button, insert the PDF URL, and add the "download" attribute to enable direct downloading without redirection.
To make a button in Webflow download a PDF file directly without opening a new tab or redirecting the user, you'll need to use a download attribute. Here's how to do it:
1. Upload the PDF File to Webflow
- Open the Webflow Designer and go to the Assets panel (press
J). - Click the “Upload” icon and select your PDF file.
- After upload, right-click the PDF file in the panel and choose "Copy URL" to get the full link.
2. Add a Button Element
- Drag a Button element to your page or section.
- Select the button and go to the Element Settings panel (D key).
3. Add a Custom Link with the 'download' Attribute
Since Webflow's built-in Button field does not support the download attribute directly, use a Text Link or a Link Block instead and style it to look like a button.
- Drag a Link Block or Text Link onto the canvas.
- Paste the PDF URL (copied earlier) into the Link Settings → URL field.
- Add a custom attribute:
- Name:
download - Value: (leave blank or add a filename, e.g.,
myfile.pdf)
4. Style the Link Like a Button (Optional)
- Apply button-like styles (e.g., padding, background color, border-radius) to make the link look like your standard button.
Summary
To create a non-redirecting, downloadable PDF button in Webflow:
- Upload the PDF to your assets.
- Use a Link Block or Text Link, not a native Button component.
- Add the download attribute to the link settings.
- Style your link to match your site's button design if needed.