Brian Gardner published a post on adding CSS buttons to a website created with the Genesis Theme Framework. According to his post, StudioPress will be implementing these additions in the new Genesis parent theme once Genesis 1.9 is released.

I’ve added a few extra touches to his code which produces what you see below:

Blue Button Link

Gray Button Link

Green Button Link

Purple Button Link

Red Button Link

Yellow Button Link

Following are the changes I made to Brian’s existing style sheet code

.button-yellow {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    background: url(images/overlay.png) repeat-x;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    color: #444!important;
    font-weight: 400;
    padding: 10px 15px;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);

In the code above I used a transparent png with a gradient to give the buttons some dimension. You can grab the overlay.png file here. is Powered by the Genesis Framework

Genesis Framework for WordPress

The Genesis Framework by StudioPress empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and choose from a selection of great looking premade designs. Start using the Genesis Framework!


  1. says

    Looks better using the image than pure css but could look even better. The problem i have is i moved from Woo themes to genesis and have shortcodes that i need to bring back to life.

  2. says

    Didn’t get to finish my comment… I was going to add that I think they’re a bit too light though, kind of hard to see =)

    • Brad Potter says

      Hey Jonathan, Thanks for stopping by. I didn’t make any changes to the original colors, just added some dimension and depth.