I assume there was at least one time when you wanted to add more appeal to a html input and at that moment you didn’t knew how.
We all know how boring looks an input when we use it without styling it and that’s why today I will show you the way to get rid of this old-style input.

For the beginning here is how a non-styled input looks like:

1.Use only css without background image

First add a class or an id to your button. For this tutorial we will add an id because we do not intend to use this kind of button several times into a page:

Now let’s add some styles for the id:

#btn
{
  border: 1px solid #777777;
  background: #6e9e2d;
  color: white;
  font: bold 11px 'Trebuchet MS';
  padding: 4px;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

The final result looks like this:

Please note that border-radius actually is working only on Mozilla/Firefox, Google Chrome and Safari 3.

2.Use a custom background image

Start by creating a new .psd file with 78x28px size. From the left panel choose “Rounded Rectangle Tool” (ALT+U for Windows Users) and set a 4px radius.Fill it with #6e9e2d (green) color and apply some effects.

This is my result and also this is the Photoshop source file (please use it as you wish).

Download Photoshop FREE source file

Now, back to our code ….this image is 78x28px and we will use it as background image for our input.Here you have the new css code for it.
Note that this time you don’t need to use the value attribute anymore.

#btn
{
  background: url(test-button-2.png);
  cursor: pointer;
  width: 78px;
  height: 28px;
  display: block;
  border: none;
}

That’s it, i hope you’ll find it useful!