Implementing Additional Button Colors

This article was last updated on the January 2, 2017.

By default, all of your buttons will receive global styling based on the options you have select in the Customizer. These styles include attributes such as size, shape, and color. Should you find that you’re needing a special color for a button in a particular part of your site, you’ll need to do so with a little custom CSS. If those acronyms send you running for the hills, you shouldn’t worry as it truly isn’t as hard as it might sound.

Adding a Custom Class

The first thing we’re going to need to do before we style our button is give it a unique class name. These classes are what CSS uses to identify elements throughout your page and apply the appropriate styles for that element. A class name can pretty much be anything you want, but some good practices to follow are to use all lowercase letters and dashes if needed. To add our custom class, we’re going to use the class element of the [button] shortcode like so:

[button class="my-btn" href="#" title="Title"]
You can see from this example that we’ve added a class named my-btn to our button. Now that we have this in place, let’s apply some CSS to give our button a new color. You can use either the Custom section of the Customizer or the style.css file of your child theme if you are using one. We strongly recommend that if you plan on making more than a few CSS alterations throughout your theme that you do so with a child theme as it makes things much easier to manage over time. If you are unfamiliar with what child themes are or how to set one up, take some time to read this post from our Knowledge Base.

Targeting Your Class with CSS

There are three different button styles available in X: 3D, Flat, and Transparent. Depending on the button style you’re using globally (or have assigned to your individual button), you’re going to need a different set of CSS to target the colors correctly. We’ll go through each of these groupings of CSS below. Take note that we’re using our my-btn class from earlier in conjunction with our base button class of x-btn in all of these examples. Additionally, the example colors we’re using here are the default button colors that come with X, which you will need to alter to suit your desired end result.

3D Buttons

The following CSS should be used to alter the 3D button style colors:
.x-btn.my-btn {
  color: #ffffff;
  border-color: #ac1100;
  background-color: #ff2a13;
  -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
          box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.my-btn:hover {
  color: #ffffff;
  border-color: #600900;
  background-color: #ef2201;
  -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
          box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}
Take note that for this button style we not only need to adjust the color, border-color, and background-color properties, but we also need to change part of the box-shadow applied to the button. The part that you will want to alter is in the first 0 0.25em 0 0 #a71000 string for both -webkit-box-shadow and box-shadow, with the #a71000 being the color that you’ll want to update. This serves as the bottom part of the button. You will also want to make sure that you set your :hover styles as well for when a user mouses over your button.

Flat Buttons

The following CSS should be used to alter the Flat button style colors:
.x-btn.my-btn {
  color: #ffffff;
  border-color: #ac1100;
  background-color: #ff2a13;
}

.x-btn.my-btn:hover {
  color: #ffffff;
  border-color: #600900;
  background-color: #ef2201;
}
Everything here is exactly the same as the 3D button example from above other than the fact that we’ve removed the box-shadow and -webkit-box-shadow properties as they are not used for this particular button style.

Transparent Buttons

The following CSS should be used to alter the Transparent button style colors:
.x-btn.my-btn {
  color: #ffffff;
  border-color: #ac1100;
}

.x-btn.my-btn:hover {
  color: #ffffff;
  border-color: #600900;
}
We have taken the background-color property out of this example as well due to the fact that this button is meant to be see-through. However, you could experiment with adding in a background-color to the base or hover button style to achieve some very cool effects. That’s all it takes to get your different button colors implemented. If you’re having a hard time getting the colors in place that you want, we recommend hopping over to the Customizer and playing around with your designs in there. After you have found a color palette that suits your needs, you can then copy these values over to your custom CSS.