PDF - Button
A customizable PDF button for Framer — open in a new tab or download files with one click, pick your viewer, and style hover, color, and font to match your design.
Make it with Workshop
Build your own component with AI
How to use
1. Upload your PDF
Simply choose any .pdf file from your computer.
→ Property: PDF
2. Choose your viewer
Select how you want the file to open:
Google Docs – quick and familiar
Mozilla pdf.js – clean embedded view
Browser Native – opens directly in your browser
→ Property: Viewer
3. Set the action
Decide whether the button opens a new tab or downloads the file instantly.
→ Property: Action
4. Customize your style
Design the button to match your website:
Label — set your call-to-action text
Padding & Radius — adjust spacing and corner shape
Text & Background Colors — full color control
Hover Effects — control scale, opacity, and transition duration for smooth animations
Font — choose your typeface with extended settings
→ Properties: Label, Padding, Radius, Text, Background, Hover, Font
5. Publish your site
That’s it — your PDF button is ready to open or download files directly from your Framer website.
