Create nice submit buttons with CSS and no images

Submit buttons with pure css - no imagesIn this post we’ll demonstrate how submit buttons in forms can be styled with CSS without using any images.

If you’re very interested in creating nice looking websites with high performance, styling without images it’s worth considering, since it can decrease loading times of your pages, due to less http requests per page.

The examples in this post is both using standard CSS 2 and the upcoming CSS 3 to demonstrate some of the effects that can easily be applied to your submit buttons

A basic button with background color

The first example is adding a new background and text color to a submit button. By changing the background color, you can increase the visibility of the submit button.

.sub1 {
 background-color:#00A400;
 color: #ffffff;
 border-width:1px;
 border-color:#000000;
 }

This CSS creates the following submit button:

CSS styled submit button with background color

Hover effect

To create a nice effect when the user is hovering over the button, or clicks the button, we expand the CSS with a hover effect.


.sub2 {
 background-color:#00A400;
 color: #ffffff;
 border-width:1px;
 border-color:#000000;
 }

 .sub2:hover {
 background-color:#00CC00;
 }

This creates the following button with a nice effect when the mouse hovers over the button:

Submit button with CSS hover effect

3D borders

To make the button stand even more out from the rest of the page, a 3D effect can be added to the borders.

The effect is achieved by making the top and left border brighter than the background color, and the bottom and right border darker than the background.

To increase the hover effect, the border colors are reversed in the hover state of the button.


.sub3 {
 color: #ffffff;
 background-color:#00A400;
 border-width:1px;
 border-style:solid;
 border-bottom-color:#006200;
 border-right-color:#006200;
 border-top-color:#09FF09;
 border-left-color:#09FF09;
 font-size:12px;
 }

 .sub3:hover {
 background-color:#00CC00;
 border-bottom-color:#09FF09;
 border-right-color:#09FF09;
 border-top-color:#006200;
 border-left-color:#006200;
 }

This CSS creates the following  button:

Submit button in CSS with 3d effect

Rounded corners

To make the button look nicer, you can add rounded corners.

Rounded corners are part of CSS3, that’s yet only only supported by a limited amount of browsers, like Firefox, Safari, and Chrome.

The good thing is that if the browser don’t support rounded corners, a normal square box is just displayed instead, no big drama here…


.sub4 {
 color: #ffffff;
 background-color:#00A400;
 border-width:1px;
 border-style:solid;
 border-bottom-color:#006200;
 border-right-color:#006200;
 border-top-color:#09FF09;
 border-left-color:#09FF09;
 font-size:12px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }

 .sub4:hover {
 background-color:#00CC00;
 }

The rounded corner CSS creates this button:

Submit button in CSS 3 with rounded corners

Text shadow and box shadow

If you want to go all in for a CSS3 button, you could also experiment with adding a shadow to the text in he button, and use the CSS 3 box shadow to create a nice shadow from the box as well.


.sub5 {
 background-color: #00A400;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-box-shadow: 3px 3px 1px #999;
 -webkit-box-shadow: 3px 3px 1px #999;
 border: solid 1px #CCC;
 font-size:14px;
 color: #ffffff;
 text-shadow: 2px 2px 4px #000000;
 }

 .sub5:hover {
 background-color: #00CC00;
 }

The CSS 3 button with rounded corners, text shadow and bow shadow looks like this:

CSS 3 submit button with rounded corners, text and box shadow

Conclusion

In this post we have been playing around with the CSS 2 and CSS 3 possibilities for styling a submit button without using images.

See live examples here

The examples can easily be modified and tweaked to fit into existing designs.

Just be aware, that if you’re going for the full-blown CSS 3 button, it might be a good idea to tjeck the browser statistics for your site to see how many of your users that are using CSS 3 ready browsers.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Comments are closed.