Webflow download pdf button

Set a default domain. Buy a custom domain. SSL hosting. Troubleshoot website performance issues. Paid vs. Content-driven design.

Content strategy. Google site verification. Google Analytics. Creative Market template. ThemeForest template. Webflow templates overview. Showcase a project.

Duplicate, transfer, or delete a project. Share a read-only link. Favicons and touch icons. Webflow branding. Editor branding. Custom code. Project and page passwords. Account plans. Team account. Account billing. Team billing.

Project billing. Digital downloads Add links for file downloads to any product in your store. This video features an old UI. Here, you can see the show state options. Click the state that you want to edit. If you fully own a website that is, it's not a client's site , then you can also access this data and manage it in your Project settings dashboard or in the Editor dashboard.

Here, you can configure how and where you can receive this data. Learn all about setting up form notifications. You can view the submissions there, or you can even download a CSV file. You can also access form submissions in the CMS Editor. Learn all about form submissions and how to manage form data. If you host websites that collect personal data from EU residents — e. This data protection self-assessment checklist can be helpful.

Got a lesson suggestion? Let us know. Need more help? Want to report a bug? Contact support. Have feedback on the feature? Submit feature feedback. Courses Lessons Contact More. Thank you! Your submission has been received! Lesson library. Intro to the box model. Intro to the Designer. Intro to the CMS Editor. Div block. Link block. Lottie animation. Social media. To add a shadow to your button, go into the Effects section of the Style panel , click the plus sign next to Box shadows, and configure the settings e.

Now when you click back into your Hover state, you can modify the same shadow you just created tweak it to change on hover. You can increase the opacity e. Learn more about using box shadows. In the Effects section, click the plus sign next to Transitions.

Click into the menu next to Type and choose Background color. The default duration is set to , which means it will transition over milliseconds. Hover over the button to test it out. To animate the shadow, apply a transition to the Box shadow property and change the easing curve.

Because the start is so dramatic, you may want to expand the timing to MS. You can always press Escape on Mac and Windows to deselect an element, but the element boundary the blue outline when you hover to test might be distracting. Next to the breakpoints icons, you can choose to Hide element edges. Add your move value e.

You can also add a transform transition. Go back into the None state for your button. Scroll down to the Effects section, and again click the plus sign next to Transforms.

Next to Type, choose Transform from the menu and change your Easing e. To place multiple buttons next to each other, copy and paste your first button. Holding the Alt key while dragging the margin arrows will create space on both sides of the button and keep it center aligned.

Remember that style changes you make to any button with that class will affect all buttons with that class. Instead of adding a special class to buttons in your hero section, you can add a div block, name it e. Button wrapper , and drag each button inside. This lets you manage one button class and set a negative margin for perfect alignment.

Drag a Link block onto your canvas from the Add panel under Basic and name it to apply a class. To get rid of the underline, click the X next to Style in the Typography section of the Style panel. You can change the link colour in this same panel. You can add an icon e. To align your icon inside the button, change the settings in the Style panel under Layout e. Display : center, Align : center and adjust your margins under Spacing.

And because you added flex to the Main button class, your two buttons on the top will take up the full width of the Button wrapper div block.

To fix this, choose your Button wrapper in the Navigator, and in the Style panel under Layout , set Display to center. Especially with interactions and animations. Got a lesson suggestion? Let us know. Need more help? Page loader animation. Rotate on mouseover.

Scroll progress indicator. Reveal on scroll. Reveal on hover. Show and hide on click. Overview dynamic content. Intro to Webflow CMS. CMS Collections. Collection list. Collection pages. Modify a collection. Filter Collection lists.

Conditional visibility. Overview Ecommerce Collections. Design your store. Customize the Cart button. Create product variants. Customize ecommerce emails. Launch your ecommerce store. Webflow site plans. Manage site plans. Client billing. Connect a custom domain. Set a default domain. Buy a custom domain. SSL hosting. Troubleshoot website performance issues.