Better Buttons

I like to change the color of my form buttons to match the color palette of the website I'm developing. CFwebstore makes it easy to add color or a background image by just altering the default css file.

All the public buttons in Cfwebstore (the admin buttons are separate) have the class attribute 'formbutton'. If you go to css/default.css around line 427 your see this code:

.formbutton {
BORDER-RIGHT: 1px outset;
BORDER-TOP: 1px outset;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
BORDER-LEFT: 1px outset;
COLOR: white;
BORDER-BOTTOM: 1px outset;
BACKGROUND-COLOR: #999999;
text-align : center;
}

From that, you get the plain grey button.

The first thing we want to do is change the background color. So let's change

BACKGROUND-COLOR: #999999;
to
BACKGROUND-COLOR: #167BB1;

We get a button with a nice blue background. No lets make it a little bigger by increasing the font size and  add some padding. So add this to the bottom:

PADDING: 4px 12px;
FONT-SIZE: 12px;

That's an abbreviated way to say 'add 4px of padding to the top and bottom of the text and 12px of padding to the left and right'.

Now, lets add an image to the background. Here's the image (right click to download)

and here's the line of code to change:

BACKGROUND-COLOR: #167BB1;
becomes
background: url(../images/button-bg-2.jpg) center bottom;

and looks like this

Recently, I started rounding the edges of my buttons. This only works in Firfox, Safari and other CSS3 compliant browsers. IE won't use CSS3 until IE 9 at the earliest. But for everyone else, this looks cool.

-moz-border-radius: 8px;
-webkit-border-radius: 8px;

This rounds each corner by 8px. I also removed all the borders.

Here's my final code:

.formbutton {
BORDER: 0;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: white;
TEXT-ALIGN : center;
PADDING: 4px 12px;
BACKGROUND: #167BB1 url(../images/button-bg-2.jpg) center bottom ;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

Below are some other backgrounds I've used for buttons. I hope this helps you add a little color to your Cfwebstore buttons.