A Nice Button With a Gradient PNG

Borrowing again from things Peter has done (Post 1, Post 2), I did a button effect using his gradient alpha PNG ideas.

The Gradient on a blue background:


And the buttons I did using the graphic...really just a solid background with a border. But the gradient makes them look much better.

Button Button Button Button

Note: I couldn't get some of the effects to work right in the blog editor. Since the gradient I did goes from transparent to opaque to transparent in a top-to-bottom pattern, you can use the CSS X:hover to change one tag background-position: top; to do the mouse-over.

<style>
.mjbbutton {
background:#f44 url(/images/top-bottom-gradient.png) repeat-x bottom;
border: 1px solid #800;
padding: 4px;
color: black;
cursor:hand;
}
.mjbbutton:hover {
background-position: top;
}
</style>

For MyMealCoach, I'm using this so a client will be able pick a color scheme, and the buttons can all change to use their colors--without having to redo any graphics.