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

Creating a button

Add a Button onto your page from the Elements Panel under the Basic section.

Webflow Button Element
 

Customizing the button 

You can customize the button by:

  • Adding a link
  • 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.

 

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.