O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling Form Buttons

Problem

You want to stylize the color, padding, borders, and rollover effects for Submit and Reset buttons on a form.The top of Figure 8-10 shows a form without styles applied to the buttons, and the bottom of Figure 8-10 shows the form with stylized buttons.

Solution

First use a class selector to design the buttons:

<form action="simplequiz.php" method="post">
 <label for="question">Who is president of the U.S.?
</label>
 <input type="text" name="question" id="textfield"
 value="Type answer here" /><br />
 <input name="reset" type="reset" value="Reset"
 class="buttonReset" />
 <input type="submit" name="Submit" value="Submit"
class="buttonSubmit" />
</form>
The form buttons without styles applied (top) and with styles applied (bottom)

Figure 8-10. The form buttons without styles applied (top) and with styles applied (bottom)

Then use CSS to stylize the buttons:

.buttonReset {
 color: #fcc;
 background-color: #900;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
 background-image: url(title-glass.png);
 background-repeat: repeat-x;
 background-position: 50%;
 text-shadow: 0 −1px 0 #666;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-top: 1px solid #900;
}
.buttonSubmit { color: white; background-color: #660; font-size: 1.5em; border: 1px solid #660; padding: 4px; background-image: url(title-glass.png); background-repeat: repeat-x; background-position: 50%; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-top: 1px solid #660; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required