Well, thanks for buying me a chai first off! :-)
There are two different ways that you can tweak the appearance of a submit button in an HTML form: you can use Cascading Style Sheet attributes, or you can simply replace it with a graphic.
The latter is easier to explain, so check this out:
<form method="get" action="http://search.yahoo.com/search">
<b>Search on Yahoo: </b>
<input type="text" name="p" />
<input type="image" name="submit" src="submit.png" border="0" />
</form>
Here's how this mini-form -- a Yahoo search box for your own Web page, actually -- looks when I add my rather crazy looking submit button:
Try it, the form really works.
That's one way you can get the submit button to look as you desire: just create it in a button editor or graphics editor and you're set.
The other way to work with the submit button, however, a way that's far more common, is to make some tweaks in the CSS stylesheet for the page itself. This can be done within the submit tag itself, using the style="" attribute, but I prefer to drop it into its own style block at the top of the page.
That looks like this:
<style type="text/css" rel="stylesheet">
#mysubmit { background-color: #cfc; font-size: 60%;
padding: 20px; font-weight: bold; }
</style>
<form method="get" action="http://search.yahoo.com/search">
<b>Search on Yahoo: </b>
<input type="text" name="p" />
<input type="submit" id="mysubmit" value="go!" />
</form>
I'm using the "id" attribute to target a specific element of the page with the CSS modifications ("mysubmit") and it's very important ot note that some browsers just cannot render these stylized buttons properly, processing some attribute changes, but ignoring others.
In this example, I'm changing the size of the text in the submit button (making it smaller and bold), changing the background color of the button from the usual grey to a light green, and making the button itself larger by adding more padding than usual. Here's the result:
Note that your browser might well not show anything fancy, so I'll also show you how it renders in the CSS-friendly Firefox browser:
Hope that helps you start traveling down the road to custom submit buttons!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
Thx very much, just one little type error: you got all the > at the end of a tag mixed up for a <