How to Style Buttons with CSS in

Website buttons encourage users to engage with your website. Buttons are more attention-grabbing than typical links.

You may want to style buttons with CSS if you want your website’s visitors to click on a button to download an e-book, sign up for your mailing list, or add products to a cart. Color, size, placement, and other visual elements of site buttons can influence click-through and conversion rates.

3 best practices for button styling

To maximize the marketing results of your website’s buttons, consider how the buttons’ >design elements contribute to your website user experience (UX).

1. Legibility

Small buttons with tiny text are difficult to read and unlikely to catch a visitor’s eye. A general best practice is to use large, legible font in a dark color.

2. Color

Use a button background color that stands out from your homepage. Choosing a font color that contrasts with the button color is another way to add contrast. According to WordStream, orange and green buttons sometimes perform best.

3. Shape

A defined shape or border for your buttons can improve UX and visibility. CSS can be used to create buttons with square or rounded edges or to add button borders.

Remember, site buttons should be used sparingly. Using too many buttons on your site can confuse visitors. Generally, adding one primary call-to-action button per page is optimal for UX.

Customizing site buttons with CSS

You can unlock the ability to customize your site’s CSS with a Premium or Business plan. To begin making buttons, go to your site’s Customizer‘s CSS panel. customizer

image credit: Support

1. Access the customizer

  1. Click My Site
  2. Select Design
  3. Choose Customize

2. Customize site buttons

You don’t need to be fluent in CSS to make changes to the size, shape, or color of your buttons. The following tutorial explains how to style site buttons with CSS by adding CSS rules to your site customizer.

  1. Select CSS from the Customizer menu
  2. Remove placeholder text

If you’ve never edited CSS before, you will see the following default code. Remove this before you copy-and-paste in your custom CSS.

Welcome to Custom CSS!

To learn how this works, see

WordPress CSS customization

image credit: Support

3. Copy-and-paste CSS

Add CSS rules to the site customizer CSS panel.

4. Select “Save and Publish”

Until you select Save and Publish, none of your changes are live. This allows you to experiment endlessly with customizing your site buttons while viewing changes in real-time.

5. Access CSS revisions

The most recent 25 revisions to your theme CSS can be accessed through the CSS Revisions link at the top right of the CSS panel. Remember, CSS is theme-specific, so if you change themes, your custom button styling will not be saved. However, you can reuse past style choices by clicking the CSS Revisions option.

Basic CSS button styles

CSS can be used to extensively customize many different elements of site buttons, including:

  • Background-color — the primary button color, determined by hex color codes.
  • Border — an optional button border measured in pixels.
  • Color — text color, using hex codes.
  • Padding — text spacing, measured in pixels.
  • Text-align — aligning text in the center, or to the right or left.
  • Font-size — the font size on the button, measured in pixels.

Modify the following code snippet and copy-and-paste it into your customizer.

mybutton {
background-color: #f5b041;
border-radius: 10px;
color: #fdfefe;
padding: 10px;
text-align: center;
font-size: 22px;

Customizing your website

The Customizer is a launchpad for making enticing website buttons and other site changes. Learning how to style buttons with CSS can help you create a better user experience.

Want to take your website from start to scale?

Register for the Official Growth Summit, a virtual conference taking place August 11 – 12, 2020.

Get ready. Get Growing.

Get your idea online with advice and guidance from industry experts, successful bloggers, business leaders, and creatives.

Let our experts build your custom website.

Whether you need a landing page or a full ecommerce site, an online learning academy or an interactive informational site for your business, we can build it for you.

Apply now


Jasmine Henry

Jasmine is a freelance technology writer, with interests in UX, mobile optimization, and web design trends. She's also a Project Management Professional with an academic background in Informatics and Analytics.

More by Jasmine Henry