Recipe 7.10. Creating a Submit Button That Looks Like HTML Text

Problem

You want to make a Submit button look like plain HTML text.

Solution

Use several CSS formatting properties to make a form's Submit button look like HTML text.

First, inset a class attribute and value:

<input type="submit" name="submit" value="send &raquo;"  />

Then apply CSS properties to strip away the Submit button's borders and background color (see Figure 7-15):

.submit {  border: none;  background-color: #fff;  padding: 0;  margin: 0;  width: 5em; }

Figure 7-15. A Submit button that looks like HTML text

Then add the :hover pseudo-class to create the standard rollover effect you see in Figure 7-16:

.submit:hover {  text-decoration: underline; }

Figure 7-16. Text has an underline when cursor moves over Submit button

Discussion

An HTML text-looking Submit button is perfect for designers that feel that the generic-looking submit button may not fit in their designs but do not want to use an image for a button.

There also may be times when bringing in the design element of a Submit button would be counterproductive for the user experience. Stripping down a Submit button so that it appears as text may put users' fears to rest about submitting information across the Internet.

This recipe works in browsers that allow modifications to the Submit buttons. Modern browsers that do support this recipe include Mozilla, Firefox, Navigator 7+, and Opera.