How to set up Global Button Styles in Webflow
When working with buttons we have different types of buttons:
Based on Color
- Slider Button
Based on Size
Based On Type
- 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.
Properly setting up Forms and Input fields in Webflow