09 Mar, 2010
How to style a Submit button in CSS – Example 2

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;
}
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Other similar posts that you might be interested in:
- How to style a Submit button in CSS
- Align an image in center and middle using CSS
- How to use hi-res images in web apps for iPhone4
- 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
- Introduction to CSS3 Animations by Examples
Hello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more 


Owh.. with.. picture..
I think using CSS trck..
BTW.. nice post.. :)
Element button in general can be of arbitrary shape, the truth will have to use a hack for ie
Simple effective solution.
ie have problems with buttons alaments.