How to Style Buttons with CSS in WordPress.com

Website buttons encourage users to engage with your WordPress.com 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 WordPress.com 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 WordPress.com Premium or Business plan. To begin making buttons, go to your site’s Customizer‘s CSS panel.

WordPress.com customizer

image credit: WordPress.com 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 WordPress.com 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 https://wp.me/PEmnE-Bt
*/

WordPress CSS customization

image credit: WordPress.com 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 WordPress.com customizer.

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

Customizing your WordPress.com website

The WordPress.com 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.

Thousands of small businesses and online stores call WordPress.com home.

Whether you’re looking to promote your business or share your story, we have a plan that’s right for you.

Create your own website

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