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.