1. Help Center
  2. Using the B12 Editor

Changing Your Site's Button Styling

How can I change the appearance and color of buttons on my site?


Written by Jay Douglas

To start, navigate to your Dashboard, and then click on the "Style" tab in the left-hand editing pane.

In the new pane that appears, select the "Buttons" tab.

A new pane will appear once more containing a list of options for editing your button's style.

You can customize the button's border properties as well as the font using the top-most editing box. These changes will update in your editor preview each time you click "Apply changes."

The colors of buttons can also be adjusted here. Selecting the Light, Accent, or Dark modifiers under the "Sections" header will allow you to adjust Light, Accent, or Dark section button appearance individually. By clicking "More options," you'll be able to tweak the color values for different CSS button states like 'hover' and 'focus' - by default these buttons will match your default background color. These color options can also be adjusted via your Colors menu, and values there will be matched to values here.

Once you're happy with your button's look, click the "Publish" button in the top-right corner of the editor to push your changes to your live website.

If you have any further questions, please feel free to reach out to the Customer Support team via hello@b12.io