How to Change Button Color in WordPress

WordPress offers you everything you need to create a website from scratch. It gives you various built-in functions, as well as thousands of plugins to help you achieve what you need. However, you may not want to install a plugin to complete a relatively straightforward task, like changing the colour of buttons on your website.

Fortunately, it’s usually possible to change the color of the buttons in WordPress without having to install a plugin.

How to change the color of the button via the WordPress theme

The easiest way to change the color of the buttons on your website is to use WordPress themes.

To change the button color via themes, simply navigate to Appearance > Customize > Additional CSS in your admin dashboard.

Here are some sample CSS codes you can use to change the color of all buttons on your website.

For icons and buttons in your footer:

.social-icons a,
#site-footer button:not(.toggle),
#site-footer .button,
#site-footer .faux-button,
#site-footer .wp-block-button__link,
#site-footer .wp-block-file__button,
#site-footer input[type="button"],
#site-footer input[type="reset"],
#site-footer input[type="submit"] {
   background-color: blue;
   color: white;
}

For buttons in your content:

button:not(.toggle),
.button,
.faux-button,
.wp-block-button__link,
.wp-block-file .wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.bg-accent,
.bg-accent-hover:hover,
.bg-accent-hover:focus,
:root .has-accent-background-color,
.comment-reply-link {
    background-color: blue;
}

Bonus tip: You can also change the color of links and menus on your website.

For links on your website:

.color-accent,
.color-accent-hover:hover,
.color-accent-hover:focus,
:root .has-accent-color,
.has-drop-cap:not(:focus)::first-letter,
.wp-block-button.is-style-outline,
a {
   color: blue;
}

For the menu:

body:not(.overlay-header) .primary-menu > li > a,
body:not(.overlay-header) .primary-menu > li > .icon,
.modal-menu a,
.footer-menu a,
.footer-widgets a,
#site-footer .wp-block-button.is-style-outline,
.wp-block-pullquote::before,
.singular:not(.overlay-header) .entry-header a,
.archive-header a,
.header-footer-group .color-accent,
.header-footer-group .color-accent-hover:hover {
   color: blue;
}

Don’t forget to replace the color values with your desired colors.

How to change the color of buttons in Woocommerce

WooCommerce button colors are determined by the theme used on your website. While it’s easy to make general settings for all buttons on your site, there comes a time when you’ll want to customize the button separately.

In this post, we’ll show you the quickest way to change the color of WooCommerce buttons. You can also apply this method to other buttons on your website.

Step 1: Get the CSS selector of the button

The first step is to get the CSS selector of the button. Open your website in Chrome or another web browser, right-click on the button and select Inspect. In this example, we will use the “Add to cart” button. You can also do this with other buttons.

A new window will appear. You should see the “Add to cart” button in the HTML code. It’s important to pay attention to the class part, as this is how we can edit your button color. The button normally has three classes:

1. single_add_to_cart_button
2. button
3. old

Step 2: Choose the colors of your preferred WooCommerce buttons

First things first: let’s choose a color for the button. The quickest way to find a color is to search for Color Picker on Google.

Select your preferred color here. Then copy the code that starts with # under HEX. This is the color code you need for your CSS rule. In the screenshot above it is #fcba03.

Step 3: Writing CSS rules to change the colors of the WooCommerce buttons

Navigate to Appearance > Customize > Additional CSS. Insert the following code snippet:

button.single_add_to_cart_button.button.alt {
   background-color: #fcba03;
}

When you’re done, don’t forget to click Publish so that all your settings are changed.

That’s it! The color of your button in the frontend will look like this:

Changing the color of the submit button in password forms

Finally, let’s say you have some high-value content that needs to be protected from the public. WordPress offers you the password protection function, but no option to customize the password form to match the design of your website.

In this case, you could try the PPWP plugin. Not only does this plugin allow you to easily password protect your content, but it also integrates well with the WordPress Customizer. In other words, you don’t have to touch a single line of CSS code.

With the PPWP plugin, you can customize all your password forms, i.e. sitewide, individually or partially. In this article, we will focus on the individual password form.

Step 1: Password protect your content with the PPWP plugin

You can download the PPWP plugin for free in the WordPress plugin directory. Let’s assume you have successfully installed and activated the plugin on your website.

Now navigate to Pages > Edit page.

Here you will see the Password protection for WordPress section on the right-hand side. Simply turn on the switch to lock your content. A random password will be generated automatically.

It is possible to create a custom password with the “Add new” button. By default, your content is protected with a password in this form:

Step 2: Adjusting the color of the Send button

Now it’s time to make the “Send” button more attractive. It can be your favorite color or the color that matches the design of your entire website.

Whatever it is, just follow our instructions here.

Navigate to Appearance > Customize in your WordPress dashboard.

Select the PPWP Single Password Form object in the left sidebar.

There are 3 options that you can customize. Select Button here.

You can change the style of the button, from the label to the text color to the background color.

You can select a color directly or insert a color code that you have received from the color picker.

That’s all there is to it! You can also easily customize other parts of your password forms.

Conclusion

We’ve just shown you how to customize the color of the buttons on your WordPress website. You can change all button colors associated with your theme or just some specific buttons in WooCommerce.

If you protect your content with the PPWP plugin, you can easily customize the color of the buttons and the entire password form via the WordPress Customizer.