CSS, Snippets, xHTML

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;
}

4 thoughts on “How to style a Submit button in CSS – Example 2

  1. Owh.. with.. picture..
    I think using CSS trck..
    BTW.. nice post.. :)

  2. Element button in general can be of arbitrary shape, the truth will have to use a hack for ie

  3. ie have problems with buttons alaments.

Comments are closed.

Twitter
LinkedIn
YouTube
Instagram