Buttons

For adding buttons to your project, you can use the basic button element of Webflow and add the classes you need as explained in the following.

Regular Button

Use button element of Webflow and add the class c-button. Add more classes if needed.

c-button
c-button c-button--l
c-button c-button c-button--s
c-button c-button--arrow-right
c-button c-button--arrow-right c-button--l
c-button c-button--arrow-right c-button--s

Button for CTAs

Use button element of Webflow and add the classes c-button and c-button_primary. Add more classes if needed.

c-button c-button_primary
c-button c-button_primary c-button--l
c-button c-button_primary c-button--s
c-button c-button_primary c-button--arrow-right
c-button c-button_primary c-button--arrow-right c-button--l
c-button c-button_primary c-button--arrow-right c-button--s

The primary button should be used only one time per page!

Grey Button

Use the button element of Webflow and add the classes c-button and c-button_grey. Add more classes if needed.

c-button c-button_grey
c-button c-button_grey c-button--l
c-button c-button_grey c-button--s
c-button c-button_grey c-button--arrow-right
c-button c-button_grey c-button--arrow-right c-button--l
c-button c-button_grey c-button--arrow-right c-button--s

Back to Top Button

The back-to-top-Button is component of the c-footer Symbol. Do not forget to set the page trigger c-back-to-top SHOW of the Interactions, to fade in the button while scrolling. If you need to include the button seperately (without the footer), use the c-back-top-top element of the Symbols and put it at the end of the page.

The button will regularly slide to the top of the page when clicked. But if the c-navbar (red bar with the logo) is set to position:fixed, the button won't work. You have to set another ID on top of the page (e.g. to the hero-section) and link the button to that section.