CATEGORIES

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 

 

 


FEATURED TEMPLATES