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 plugin-enabled plan. To begin making buttons, go to your site’s Customizer‘s CSS panel.
image credit: WordPress.com Support
1. Access the customizer
- Click My Site
- Select Design
- 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.
- Select CSS from the Customizer menu
- 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 http://wp.me/PEmnE-Bt
*/
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.
ABOUT THE AUTHOR
Go WordPress 