Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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; ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required