html tutorials web design help css tutorials free web graphics diy search engine optimization

Fancy Form Buttons

Using CSS code, you can dress up those plain form buttons with colors, different font faces, and even a background image. Wahoo, Mrs. Fleepingsnurl! No more bull duttons . . . I mean, dull buttons.

Look at the three reset buttons below. The first one is the normal reset button. Depending on your operating system it's probably either dull gray in color or plain white with a small border around it. The second button uses a background color and has bold text. The third one uses a background image, will have a different font face if you have the font I chose installed on your computer, and also uses bold text.

If all the buttons look the same, you're probably using an older version of Netscape. Have no fear in dressing up your form buttons though. It won't cause problems in Netscape, and over 90% of surfers will see the fancy buttons and it still works for those that can't.

You can click 'em if you want, they don't go anywhere.

How to Make the Middle Button

<input type="submit" value="Submit" 
 style="background-color: #bcc6ae; 
 border-top: 2px solid #5f6c4d; 
 border-right: 2px solid #000000; 
 border-bottom: 2px solid #000000; 
 border-left: 2px solid #5f6c4d;
 width: 80px; height: 24px;
 font-weight: bold;" />

It's your typical form input tag, with a CSS code added that features a background color, borders, width and height, and a bolded font weight. Piece of cake, right? Right . . . and this cake isn't fattening!

How to Make the Button on the Right

<input type="submit" value="Submit"  
 style="background: url(images/marble.jpg);
 color: #36431b; 
 font-family: Harrington, Pristina, cursive; 
 font-size: 14px; font-weight: bold; 
 border-top: 1px solid #5f6c4d; 
 border-right: 1px solid #000000; 
 border-bottom: 1px solid #000000; 
 border-left: 1px solid #5f6c4d;  
 width: 88px; height: 24px;" 
 value="Submit" /> 
Once again it's a typical form input tag with some style added. In this case, instead of a background color I used a background image and I changed the font and font color.

Important: Notice that the path to the background image and the image name and extension are enclosed in parentheses and follow the word url with no space between them. This is correct, do not put a space between the word url and the parenthesis bracket or it breaks the code.

If you have the Harrington font installed on your computer you'll see that font on the third button. If not, you'll see Pristina if it's installed. If neither of those fonts are installed, the browser will choose a cursive font from your installed fonts. It usually picks the first one found alphabetically.

How about that, another piece of cake. Better skip the dessert tonight, you've had enough sweets for one day.

Back | Web Design Tutorials Index

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)