An overview of the button element.

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 icon thumbnail

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.

The five elements that are included in the Basic section are div block, list, list item, link block and button (highlighted.)

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

Step one on the left, select the background color thumbnail. Step two on the right, select your preferred color in the color picker panel.

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.

Step one, select the Inheriting selectors. Step two, select the Body (All Pages) from the Inheritance dropdown menu.

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.

Step one on the left, click on the class name "Button." Step two on the right, rename class to "Main Button."

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).

The spacing panel displays 15 pixels of padding on all four sides, and no margin added.

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

The size panel displays a width of 140 pixels and a height of 55 pixels. This area is highlighted on the panel.

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.

The link settings panel displays six link button types, a dropdown for Page, a check box for "open in new tab", a dropdown menu for Preload and a show all settings button. The Page link button is selected.

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.

On the left, the cog icon is clicked and the link settings panel is open. On the right, the link settings are open in the element settings panel on the right of the designer.

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.

The selector dropdown menu displays five states, none, hover, pressed, focused and visited. None is currently selected.

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.

Step one on the left, click on the plus sign (highlighted) to add swatch as a global swatch. Step two on the right, name new global swatch and click create (highlighted).

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.

The Borders panel displays a slider and text input field for Radius, Borders buttons to select the sides, four buttons for Stye, text input field for Width and a Color picker button.

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.

Step one on the left, click the plus sign on the box shadows effect. Step two on the right, customize the shadow with type, angle, distance, blur, size and color.

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).

Step one on the left, select the Hover state from the selector states dropdown menu. Step two in the middle, enter 20 in the Alpha text input field. Step three on the right, customize the box shadow type, angle, distance, blur, size and color.

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.

Step one on the left, click the plus sign next to the Transitions effect. Step two on the right, customize the transition type, duration and easing.

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.

Step one and two on the left, select box shadow from the Type dropdown menu and click the easing button. Step three on the right, select the ease out circular button under the East Out section.

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. Next to the breakpoints icons, you can choose to Hide element edges.

The Canvas settings panel displays a width text input field, scale text input field, a check box for show element edges (highlighted), show empty elements, x-ray mode and a dropdown for guidelines. It also displays a Vision preview section with a dropdown menu.

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 2D & 3D Transforms. Add your move value (e.g. 3PX up).

Step one on the left, click the plus sign for 2D & 3D transforms. Step two on the right, customize the effects Move setting to -3 px using the slider button or input the characters in the text input field.

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).

Step one and two on the left, select transform from the Type dropdown menu and click the easing button. Step three on the right, select the ease out circular button under the East Out section.

Check out your work in preview mode.

The blue preview mode icon is highlighted next to the Page name.

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.

The spacing settings panel displays a margin of 45 pixels on both the left and right sides.

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.

Div block icon thumbnail

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.

Step one on the left, click and drag the link block icon onto your canvas. Step two on the right, name the elements’ class in the selector.

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.

On the left, the typography section from the Add panel displays six elements. The elements are heading, paragraph, text link, text block, block quote and rich text. On the right, the typography style settings displays the decoration area (highlighted).

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. 

The size settings panel displays text input fields for width, height, minimum width, minimum height, max width and max height. It also displays the four Overflow buttons, visible, hidden, scroll and auto. There is a dropdown menu for Fit settings.

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.

Step one on the left, the layout section of the style panel displays the five align styles highlighted. The center align is selected. Step two on the right, displays a margin of 15 in the spacing section of the style panel.

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.

Step one on the left, select the Button wrapper element. Step two on the right, on the layout section of the style panel select the center setting for Display.

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.

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!