24 Apr, 2009
How to style a Submit button in CSS
Web Development » CSS, Snippets, Tutorials, xHTML » How to style a Submit button in CSS
There are many ways to style input buttons in CSS. And this is how I do it.
HTML
<input type="submit" name="submit" value="Send" id="submit" />
CSS
#submit {
color: #fff;
font-size: 0;
width: 135px;
height: 60px;
border: none;
margin: 0;
padding: 0;
background: #0c0 url(images/send-now.gif) 0 0 no-repeat;
}
And that’s it, you will have a nice fancy button like below:
Check out our CSS books section for a list of recommended CSS and HTML related books.
Other similiar posts that you might be interested in:
- How to style a Submit button in CSS – Example 2
- Check username availability using AJAX and jQuery
- Change the arrow into a hand when hovering over ‘Submit’ button
- Align an image in center and middle using CSS
- Store login information in cookie using jQuery
- Fieldset and Legend bug in IE8
- Framebar (like diggbar) example in html and css with no javascript
