CSS Cookbook

5.4. Creating Form Buttons

Problem

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

Figure 5-7. The form buttons without styles applied

Figure 5-8. The form buttons with styles applied

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>

Then use CSS to stylize the buttons:

.buttonReset {
 color: #fcc;
 background-color: #900;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;        
}
.buttonSubmit {
 color: white;
 background-color: #660;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
}

Discussion

You also can stylize buttons using the ubiquitous rollover state. To create rollovers for buttons, use a JavaScript function:

<script language="JavaScript" type="text/javascript">
function classChange(styleChange,item) {
 item.className = styleChange;
}
</script>

Next, add two additional ...