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 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!