Buttons

This Buttons template is made to help the Memorisely Microlearning Club create and style buttons in Webflow. Hopefully, you can begin building your Webflow design system with them! It's a template that supports our monthly micro eBook, which distills Button principles into bitesize form ⚡
Hey! Welcome to the Memorisely Buttons Webflow template. This template makes the most of Webflow's Button Element. It's designed to upskill you on the different button sizes, states, and types. The template will grow to include more buttons over time 🎉
Template Guide
1
🗺 Navigating
Step 1
The template is organised into tabs with different button types, shapes, and thier webflow classes in each. Toggle between tabs to view each Button type.
2
⚡️ Webflow Selectors
Step 1
The template makes the most of webflow classes to style buttons. The selectors can be found in the Style Pane. In the example, you'll notice 'round' being applied to create a round button.
Step 2
Every tab has a Webflow Button Selectors section which details the visual impact of each selector.
3
🎨 Customise
Change Selectors
Webflow makes it super easy for your to customise the template to match your language. In the example, small is changed to tiny. This has no impact on style, but handy for customisation.
Change Colors
To change the buttons colors to match your palette, simply select a button, navigate to the background color selector, whack edit, and change the color to match your brand. It's also worth changing the color name!
Change Spacing
Size changes occur in the style pan, in the styling accordion. Be mindful that the size change you make will only be applied to that webflow selector.
Rounded Buttons
Rounded buttons are definitely the most popular button shape in modern tools. Their light border-radius (2px - 6px) makes them approachable and friendly as buttons. Given their curved corners and straight edges, they are also a really practical button to display inline.
Contained Buttons
Outline Buttons
Text Buttons
Webflow Button Classes
primary
Contained Medium buttons
small
Small buttons
large
Large buttons
outline
Outline buttons
text
Text buttons
button wrapper
Button wrapper
Sharp Buttons
Sharp buttons don't have a border radius, which in tools is defined as 0px or 0%. Button shape should be used as a brand visual to express the voice of a brand. Sharp buttons are formal and used in conservative tools given their sharp lines.
Contained Buttons
Outline Buttons
Text Buttons
Round Buttons
Round buttons have a 100% border radius. As text buttons, these are also known as pill buttons given their resemblance of a pill. Icon only buttons with 100% border-radius are ovals. Round buttons need plenty of space. Because their horizontal edges aren't straight they aren't too practical when displayed inline; they don't naturally align like bricks.
Contained Buttons
Outline Buttons
Text Buttons
Webflow Button Classes
round
Round buttons
Icon only
When it comes to icons in buttons, the key is not the icon size, but the icon container. This container should match the line height of your buttons text value, with 4px-6px padding.
Contained Buttons
Outline Buttons
Text Buttons
Webflow Button Classes
icon
Medium icon
small
small icon
large
Large icon
light
Inverse icon color
Icon and Text
Hey! Welcome to the Memorisely Buttons Webflow template. This template makes the most of Webflow's Button Element. It's designed to upskill you on the different button sizes, states, and types.
Contained Buttons
Play song
Play song
Play song
Outline Buttons
Play song
Play song
Play song
Text Buttons
Play song
Play song
Play song
Webflow Button Classes
with text
Icon with text margin
icon text
adjust padding with icon