Creating Pretty Buttons by Scott Alexander
In the past, when you no longer wanted to look at the boring gray buttons for
submitting your forms, your option was the input type image.
This typically looked something like <input type="image"
src="button.gif">
The problem with this solution is that you had to make a different buttons for
every different word you wanted on the button such as "go", "save", "submit",
or "search"
The other problem was that with an input type image, you could not use the
enter button on your key board to submit the form. Then you needed to also add
in things like get key strokes. Really this was a mess.
Now in the world of CSS, life is much better.
There are lots of tutorials to teach you about creating CSS buttons using divs,
anchors, borders and backgrounds. The problem is here too, is these are
basically pretty links, so that you can still not use the enter key on your
keyboard to submit your forms.
For starters, you can us a normal button like <input type="submit"
name="submit" class="submit">
Now you can use CSS to change your button.
<style> input.submit { background: #E0691A url(submit.gif) no-repeat;
border: 0; padding: 4px 0; width: 65px; margin: 0 15px 1px 0; color: #FFF;
font: bold 1em Arial, Sans-Serif; } </style>
Now this is just an example of a CSS button, but most common CSS tags will work
when applied to submit buttons.
About the Author
Scott Alexander is the lead programmer for CoreLevel Inc., a company the
specializes in real estate web site designs
|
