Colored Content Boxes and Buttons

Some themes have fancy boxes like this built into the home page. This tutorial shows you how to build your own content boxes that can be placed on any page or post in your site.

Box code and Button code

First I need the code. Luckily I can find some good starter code on the StudioPress blog. The code is on this page.

Button code could already be built into your theme

I didn’t use the StudioPress button code, I made my own buttons using this button generator. However, if you have a modern StudioPress theme it will probably already have button code built in. Try adding class="button" to a text link and see if the link changes into a button.

The CSS editing box

I can paste the code in to WordPress via the WordPress Customizer or use a plugin such as Simple CSS.

I tweaked the code provided by StudioPress slightly to make this blue box…

(If you use the StudioPress button code you’d use the class of button-yellow, not btn-orange.)

This is the HTML I used to make the colored box above…

<div class="content-box-blue">This is where the text goes.
<a class="btn-orange" href="#">This is the button text</a></div>

I took he starter code and tweaked it to look just the way I wanted it to look with a few simple edits.

First I needed to find a background color and a button color for my box. These two sites are a good place to find colors…

• Brand Colors
• Adobe Color

I’ve also written a short post about finding color schemes.

Once I’ve got the colors I want to use I can tweak the CSS code for box and button.
All I did was change the hexadecimal code for the colors. I also added a value of color to the content-box-blue selector. color: #ffffff; this makes the text in the content box white. I did the same for the button’s hover settings. color: #146eb4;

.content-box-blue {
    background-color: #146eb4;
    border: 1px solid #afcde3;
    color: #ffffff;
}

.btn-yellow{
    background-color: #ff9900;
    border: 1px solid #b2ce96;
}

.btn-yellow:hover {
    background-color: #ff9900;
    color: #146eb4;
    border: 1px solid #b2ce96;
}

Here’s the blue box again and two other boxes that I tweaked…

---

---

---

This is the full code that I used in this tutorial. You could copy and paste it in to your site.

The HTML I used…

<div class="content-box-blue">

<h2>This is a content box</h2>


You could use these content boxes to draw attention to anything important on your website. You can easily change the color of the boxes or the buttons by changing the hexadecimal code in the CSS.

<a class="btn-orange" href="#">Click me</a>
</div>





<hr>





<div class="content-box-green">

<h2>This is a content box</h2>


You could use these content boxes to draw attention to anything important on your website. You can easily change the color of the boxes or the buttons by changing the hexadecimal code in the CSS.

<a class="btn-blue" href="#">Click me</a>
</div>





<hr>





<div class="content-box-gray">

<h2>This is a content box</h2>


You could use these content boxes to draw attention to anything important on your website. You can easily change the color of the boxes or the buttons by changing the hexadecimal code in the CSS.

<a class="btn-clear" href="#">Click me</a>
</div>

The CSS I used…

/* Content Boxes
------------------------------------------------------------ */
 
.content-box-blue,
.content-box-gray,
.content-box-green {
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
    color: #ffffff;
}
 
.content-box-blue {
    background-color: #0D82DF;
    border: 1px solid #0874c9;
}
 
.content-box-gray {
    background-color: #666666;
    border: 1px solid #585858;
}
 
.content-box-green {
    background-color: #70a91b;
    border: 1px solid #609019;
}
 
/** The Buttons */
.btn-green,
.btn-green:hover,
.btn-red,
.btn-red:hover,
.btn-orange,
.btn-orange:hover,
.btn-blue,
.btn-blue:hover,
.btn-clear,
.btn-clear:hover {
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;

}
/** Green Button With Hover */
.btn-green {
  background: #83c11f;
}

.btn-green:hover {
  background: #76b118;
}

/** Red Button With Hover */
.btn-red {
  background: #f73108;
}

.btn-red:hover {
  background: #8c1000;
}

/** Orange Button With Hover */
.btn-orange {
  background: #ff6600;
}

.btn-orange:hover {
  background: #f5883f;
}

/** Blue Button With Hover */
.btn-blue {
  background: #0d81df;
}

.btn-blue:hover {
  background: #39a3f5;
}

/** Clear Button With Hover */
.btn-clear {
  color: #ffffff;
  border: solid #ffffff 2px;
}

.btn-clear:hover {
  color: #dbdbdb;
      border: solid #dbdbdb 2px;
}

If you learn just a little bit of HTML and CSS it’s surprising what you can do.
But, I always practice on a demo or back up site. And I highly recommend you do too!