A button is an element that links to pages, page sections (anchors), external links, emails, assets, and telephone numbers.

Webflow Button Element

Adding a button

You can add a button onto your page from the Add panel (A)elements tab → basic section.


Customizing the button
  

You can customize the button by:

  • Linking it
  • Changing the text
  • Styling it

Linking the button

You can add any type of link to the button from the settings window that appears once the button is added to the canvas or by opening the Element Settings panel in the right sidebar. Learn more about link settings.

Webflow Link Settings
‍Link Settings

Changing the button text

To change the text inside of a button, double click the button and type in the text that you want. You can also enter text edit mode by selecting the button and pressing enter.

 

Styling the button

If you intend to reuse a button, you can create or add a class to it.

Adjusting the Size

The button's size is determined by three factors:

  • the text inside the button
  • the padding inside the button
  • the width and height values of the button 

The size of the button changes as you change the text inside or when you make changes to the typography: the font size, the line height, the letter spacing. Any changes you make to the padding inside a button also affect the size of the button. 

You can override this size by setting custom values for width and height, but in most cases this is not recommended

 

Positioning

If you add two buttons side by side, you will notice that they are pressed up against each other. No breathing room. By adding left and right margin, you create space between them.

 

Styling button states

You can control how a button looks in different states: Hover, Pressed, Focused, or Current. Learn more about States.

Adding an icon to your button

You can add an icon to a button by applying a background image and positioning it on one side of the button. Then, you'll add padding on the side of the button on which you placed the icon so the text aligns well with the image.

  1. Select your button element
  2. Add a background image and choose your image
  3. Set the tiling to none (tile=x)
  4. Change the width
  5. Adjust the positioning. Click the left-center preset. Then, adjust the positioning from the left.
  6. Add some left padding to the button
Setting a button icon using a background image

Now, since the icon is a background image, you can change it on hover. For example, if you add an arrow image on the right side of the button, you can adjust the positioning of the arrow in the hover state to make it look like it's moving to the right when you hover on the button. You can make the transition smoother by adding a background position transition.

For more button styling, see Advanced button styling.