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:
Following are the changes I made to Brian’s existing style sheet code
[css]
.button-blue,
.button-gray,
.button-green,
.button-purple,
.button-red,
.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);
}
[/css]
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.
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.
http://bradpotter.com/wp-content/themes/brainstorm/images/overlay.png
This is 404.
Sorry about that. I have fixed the link.
I like these a lot. Sweet rounded corners!!
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 =)
Hey Jonathan, Thanks for stopping by. I didn’t make any changes to the original colors, just added some dimension and depth.