How to set up Global Button Styles in Webflow

How to set up Global Button Styles in Webflow

When working with buttons we have different types of buttons:

Based on Color

  • Primary
  • Secondary
  • Slider Button

Based on Size

  • Large
  • Medium

Based On Type

  • Button
  • Button Link


The easiest way to standardise this is with these 6 classes

  • Button → Primary Large Button
  • Button Small → Primary Small Button
  • Button Variant →  Secondary Medium Button
  • Button Variant Small → Secondary Small Button
  • Slider Button → Used for Sliders
  • Slider Button Small → Used for Sliders Small
  • Button Link → Usually a link block with an arrow

We’ve tried adding combo classes to buttons to make the process of creating them easier.

But in the end we allow for too many variants on the site and have 20+ different colors, sizes etc per project.

Which is becoming hard to manage and starts confusing Designers, Developers etc. If the project ends up requiring a lot of different buttons, we can go ahead and use Combo Classes on Button elements.

Next part

Forms

Properly setting up Forms and Input fields in Webflow

View next part toggle

Webflow, design and productivity tips

Just tips, no sales or offer emails ever.