24 Apr, 2009
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.
Found this article useful? Share it with your friends:
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 – Example 2
- Top 10 jQuery Mobile Code Snippets that you need to know
- Check username availability using AJAX and jQuery
- Change the arrow into a hand when hovering over ‘Submit’ button
- Creating a Contact Form in jQuery Mobile and PHP
- How to use hi-res images in web apps for iPhone4
- Align an image in center and middle using CSS
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 
[...] 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 [...]