An overview of the button element.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

A button serves as your call to action (CTA) and links to pages, forms, assets, and more.

In this lesson:

  1. Button basics
  2. Button states
  3. Animated transitions
  4. Multiple buttons
  5. Custom link blocks

Button basics

You can add a button from the Add panel (A) > Elements tab > Basic section. Edit button text by double-clicking the button or by selecting the button and pressing Enter.

To add a background color, click into the Style panel on the right, scroll to Backgrounds, and choose a color from the color picker. 

The button font and all typography styles are inherited from the Body (All Pages) tag. To make changes, go into the Body (All Pages) tag in the Style panel to set and override the typography defaults.

When you make a change on a new element, a class is automatically created. Classes let you control and override styles. To reuse a style, click the class label and rename it.

The size of a button is determined by the text inside (text length, font size, line height) and padding (the space inside the button).

To override the padding default values, in the Style panel under Spacing > Padding, hold Option (on Mac) or Alt (on Windows), then click and drag the cursor. This will adjust both padding values at once (either the sides or the top and bottom).

You can adjust the size of the button by changing its Width and Height in the Style panel under Size.

A button can link to a URL, an internal or external page, a page section, a file download, or it can trigger an email or a phone call.

You can either click the cog icon on the button element in the canvas, or open the Settings panel on the right to adjust your button settings.

Learn more about link settings.

Button states

If you click into the Selector field in the Style panel, you’ll see all your button states. By default, there’s no hover styling on a button. You can click into the Hover state in the dropdown list to modify what the button looks like when you hover on it.

Here, you can also set a background color to change on hover. If you add your color choice as a global swatch, you can reuse it throughout your project.

You can set any of the other styles on hover under Effects, like adding a transform. Select Move, for example, to make the button move on hover.

Learn more about:

To play around with other button properties, switch out of the Hover state to None in the dropdown menu back in the Selector. You can do things like round corners by changing the Radius under the Borders section.

To add a shadow to your button, go into the Effects section of the Style panel, click the plus sign next to Box shadows, and configure the settings (e.g. soften the Blur by setting it to 20px and set the Angle to 180). Since this isn’t the hover state, you can set the Distance and Color opacity to 0. Later we’ll add a box shadow that will offset these values and make the hover effect more dramatic.

Now when you click back into your Hover state, you can modify the same shadow you just created (tweak it to change on hover). You can increase the opacity (e.g. set the opacity to 20%) and change the distance (e.g. to 3px).

Return to the None state to test how your button works on hover.

Learn more about using box shadows.

Animated transitions

An animated transition makes moving between none and hover state more smooth. 

To add a transition, make sure you’re in the None state (always add transitions from the None state) in the Style panel. In the Effects section, click the plus sign next to Transitions. Click into the menu next to Type and choose Background color. The default duration is set to 200, which means it will transition over 200 milliseconds. Hover over the button to test it out.

To animate the shadow, apply a transition to the Box shadow property and change the easing curve. The default is “ease,” but you can try a more dramatic start and a more gradual ending (“ease out circular” is a good choice). Because the start is so dramatic, you may want to expand the timing to 1000 MS.

Hover to preview your work.

You can always press Escape (on Mac and Windows) to deselect an element, but the element boundary (the blue outline when you hover to test) might be distracting. On the lower left toolbar, you can choose to Hide element edges.

To move the button on hover, go back into the Hover state in the Selector on the Style panel, under the Effects section, click the plus sign next to Transforms. Add your move value (e.g. 3PX up).

You can also add a transform transition. Go back into the None state for your button. Scroll down to the Effects section, and again click the plus sign next to Transforms. Next to Type, choose Transform from the menu and change your Easing (e.g. to “ease out circular”) and the Duration (e.g. to 1000 MS).

Check out your work in preview mode.

Multiple buttons

To place multiple buttons next to each other, copy and paste your first button. Holding the Alt key while dragging the margin arrows will create space on both sides of the button and keep it center aligned. Remember that style changes you make to any button with that class will affect all buttons with that class.

Instead of adding a special class to buttons in your hero section, you can add a div block, name it (e.g. Button wrapper), and drag each button inside. This lets you manage one button class and set a negative margin for perfect alignment.

This works on everything — you can use a button wrapper (with negative margin) to offset any symmetrical margin you’ve set on buttons anywhere. You won’t have to manage different groups of buttons just because their alignment is different.

Custom link blocks

A link block is just like a div block — it’s a box we can put elements inside. Drag a Link block onto your canvas from the Add panel under Basic and name it to apply a class.

From the Add panel under Typography, drag a Text block onto the canvas inside the Link block, and double click to edit the text. To get rid of the underline, click the X next to Style in the Typography section of the Style panel. You can change the link colour in this same panel.

You can add an icon (e.g. an arrow) by dragging it right inside the link block. If you use the style panel to enter the value instead of clicking and dragging the corner to resize the icon, the class that’s automatically created will let you change the arrow size every time you reuse this link block throughout your project. 

To align your icon inside the button, change the settings in the Style panel under Layout (e.g. Display: center, Align: center) and adjust your margins under Spacing.

And because you added flex to the Main button class, your two buttons on the top will take up the full width of the Button wrapper div block. To fix this, choose your Button wrapper in the Navigator, and in the Style panel under Layout, set Display to center.

This is just the beginning — there’s so much you can do. Especially with interactions and animations. We have a full course and tons of videos and articles on these topics — so check those out on Webflow University if you haven’t already.

Clone this project
Try Webflow — it's free
This video features an old UI. Updated version coming soon!