Web Development Blog

web 2.0 style call-to-action buttons can be purchased in psd format from graphic river

Since writing How to style a Submit button in CSS a few months ago, I have found an alternative way to achieve the same result. In this example, we will be using <button> tag instead of <input> tag. The <button> tag will still submit the form that it belongs to when clicked because the type of the button is set as submit.

HTML

<button id="button" name="button" type="submit">
<span>Contact us today!</span></button>

CSS

#button {
	background: transparent url(contact.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	width: 180px;
	height: 50px;
}

#button span {
	display: none;
}

Other similiar posts that you might be interested in:

• How to style a Submit button in CSS
• Align an image in center and middle using CSS
• Fieldset and Legend bug in IE8
• Change the arrow into a hand when hovering over ‘Submit’ button
• Some simple but effective CSS rules for IE 6
• Framebar (like diggbar) example in html and css with no javascript
• How to code an HTML Email Newsletter