Advanced button styling

Style your website buttons with advanced styling.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

You can style the Button element in your projects in many different ways.

In this lesson

In this lesson, we'll cover four examples of advanced styling:

  1. Button Alignment
  2. Transparent Backgrounds
  3. Hover and transitions
  4. Box Shadows

Button Alignment

If you have multiple buttons occupying the same horizontal space they will appear pressed up against each other. You can add margin to both sides to create space between them. Holding the Alt key while dragging the margin arrows will increase margin on both sides of the button.

On the left, three buttons have a 30 pixel margin all around. On the right, the spacing section includes 30 pixels of margin on every side.

However, if other instances of this button are aligned to one side, like the left side for example, adding margin on both sides of the button will push them away from the left side alignment.

A heading and paragraph text elements are aligned to the left. Three buttons are aligned to the left but have 30 pixels of margin pushing them all to the right and no longer lined up with the heading and paragraph elements. A blue line graphic details the misalignment with a red transparent circle surrounding the area.

To counteract this you can take the following steps:

  1. Add a div block from the Add panel
  2. Move existing buttons into the div block
  3. Give the div block a class name
  4. Add a negative value to the left margin on the div block equal to the margin added to the buttons (e.g. if there is 20px of left and right margin on the button, you should add -20px left margin to the div block)
Three buttons are inside of a div called Button block which has -20 pixels of margin. This customization of the div block brings the buttons into alignment with the left aligned heading and paragraph elements.

This will ensure the left aligned buttons are even along the left side. If there are instances of the same buttons that are centered the negative margin will not affect them.

Transparent Background

You can create a transparent background on buttons and make it stand out in other ways. For example, you can add a solid color border.

The background color by default is blue. You can edit the background color, opacity, and borders to look however you’d like. Here's how to create a button with transparent background and a border:

  1. Add a button and give it a class name
  2. Click the background color and adjust the opacity to 0%
  3. Add a 1px solid border and set the color to white
  4. Add border radius (large border radius, such as 500px, will result in a pill-shaped button)
Step one on the left, the background color opacity is set to 0%. The transparency slider and Alpha input field are highlighted on the color picker modal window. Step two on the right, a border is added to the button element with a 500 pixel radius, 2 pixel width and the color white on the borders settings panel.
A heading and paragraph element are both above three buttons with a transparent background with a white border and white text, overlaid on a slate blue image in the background.
Example of three buttons containing a transparent background.

Hover Controls

By default there is no hover styling on a button. If we go over to States and select the Hover state, we can set a completely different background color. For example we can even change the opacity of the background color.

You can set any other styles on hover like moving the button up by adding a transform - move.

Learn more:

Box Shadows

It’s common to add shadows when interacting with buttons. Box shadow styles provide a good range of control for these shadow effects.

Learn more: Using box shadows

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top