Styling your submit buttons0

Before anything else – take a quick peak at the finished demo..

View Demo

The guys over at Papermashup have a great tutorial on creating sexy looking buttons that degrade peacefully in non-css3 browsers. I needed a submit button, so I’ve taken a huge chunk of their button tutorial and then just tweaked it somewhat so that we have a sexy looking submit button too!

Step 1 – The default submit button

Here is the bog standard HTML submit button. We’ve added a class name of button.


<input type="submit" class="button" />

Here’s a quick peak at how our default button looks in the major browsers. Not very sexy.

Step 2 – Add some styles

Now were just going to add some simple styles that should at least uniform the buttons to look similar to one another.


.button, .button:visited
{
font-size:26px;
color:#fff;
background:#F10026;
cursor: pointer;
border:none;
padding:4px 10px 5px;
text-decoration:none;
text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
text-align:center;
display:inline-block;
line-height:1;
}


After the above changes, here is how our buttons are looking. As you can see, the text position is rendered slightly differently on each browser. I cant explain the background colour difference in IE. I used the same color code and checked this ten times over. For now a mystery.

Step 3 – Add some CSS3 styles

Lets spice up the button with some rounded corners, a very subtle text shadow and a nice thin box shadow. Sadly, these are CSS3 styles and therefore, these effects will only be displayed on CSS3 compliant browsers. You an see that the IE example below has no idea what is going on.


.button, .button:visited
{
/* extra styles */
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}


Step 4 – Choice of gradient effect

The submit button background is currently a solid color, but if your like me and think a nice subtle gradient effect will spice it up a little, then there are two ways to put that into effect.

Method 1- The overlay image.

We can use an image, commonly known as an ‘overlay’ which is usually about 50px in height and 1px wide. The overlay image is basically a thin transparent slither that is slightly darker at the bottom than the top (almost impossible to see without a dark background). When placed over the background colour, it gives a nice gradient effect. To use it, simply save an overlay image (if you can’t see the image, dont worry, its there, just go File > Select All and you’ll see it highlighted, then right click and save image) and change the background style in your css like so.


.button, .button:visited
{
background:#F10026 url(images/overlay.png) repeat-x;
}


Method 2 – Use gradient effect directly in your CSS

This is a bit more messy, but the advantage is that you are fully in control of the gradient, its colours and where the gradient starts and stops! The first thing to note, is that because we would like to ensure the gradient works in as many browsers as possible, we need to apply the same CSS style for each of the major browsers. Check out this great guide on CSS3 gradients.


/* firefox */
background: -moz-linear-gradient(top, #ff7373, #ff7373 1%, #F10026 100%);

/* mainly safari and chrome*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ff7373), to(#F10026));

/* IE (even IE6!) */
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0,startColorStr=#ff7373,endColorStr=#F10026);

Examples using overlay images against the CSS gradients:

Personally I prefer the overlay method as it tends to be easier to manage, works well and I rarely encounter an problems. The rest of the tutorial uses the overlay image approach.

Step 5 – Setting the size of the submit button

This is where we add our own personal touch. Just like Ashley at Papermashup suggests (and rightly so), so we can create some simple CSS classes that control the size of our submit buttons. For example, we can create a class called ‘small’ that generates a small sized button and we could also create a class called ‘large’ that creates… you guessed it… a large button.

I should just point out that if you need the dimensions of your submit button to appear exactly the same in all browsers, then you must set the exact width and height you desire as each browser may interpret your styles differently.

First, some examples of setting the exact button dimensions (notice we reset the padding to 0). I’ve omitted safari as its the same as Chrome and so the images fit!


.small
{
padding:0px;
font-size:12px;
height:20px;
width:80px;
}
.large
{
padding:0px;
font-size:16px;
height:30px;
width:100px;
}


Using set height and widths means they are the same in all browsers, although the text position is harder to manage. The buttons in the example below are exactly the size we specified in the css.

Instead of specifiying the size of the button, we can increase/decrease the padding and font-size accordingly. This usually has a better effect as the text is padded semetrically, however, it should be clear that the button sizes can be slightly different due to browser rendering and if your layout requires pixel perfect precision, you could experience layout problems.


.small
{
padding:3px 5px 4px;
font-size:12px;
}
.medium
{
padding:6px 10px 7px;
font-size:16px;
}
.large
{
padding:8px 15px 10px;
font-size:20px;
}


We could (if we really wanted to) create a super duper button.


.super_duper
{
padding:15px 20px 12px;
font-size:30px;
}


In order to apply our new styles to the submit button, we just need to add our classes to the HTML code like so:


<input type="submit" class="button small" />
<input type="submit" class="button large" />
<input type="submit" class="button super_duper" />


Step 6 – Different colour buttons are now forever easy to create.

In similar fashion to the way we can easily create a new class called ‘small’ with small dimensions, we can also create a class called ‘blue’ with… you guessed it, blue colours!

Here are some different colour examples, with some hover over effects chucked in for good measure:


.blue {
background-color:#4479d4;
}
.blue:hover {
background-color:#1019a9;
}
.green {
background-color:#00c90d;
}
.green:hover {
background-color:#008209;
}
.red {
background-color:#f00f00;
}
.red:hover {
background-color:#a60000;
}


And then to put these new colours into effect, we just add the new class name into the HTML.

Finally, with all our styles and classes, we can now create new buttons on the fly with ease!


<input type="submit" class="button small purple" />
<input type="submit" class="button medium green" />
<input type="submit" class="button large red" />


I recommend adding the additional button states (link, visited, hover, active) to your CSS so that your users receive the same sexy buttons each time they whizz through your site.

Here is the full CSS for your buttons


/* button styles */
.button, .button:visited
{
font-size:26px;
color:#fff;
background:#F10026 url(images/overlay.png) repeat-x;
cursor: pointer;
border:none;
padding:4px 10px 5px;
text-decoration:none;
text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
text-align:center;
display:inline-block;
line-height:1;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* button sizes */
.small
{
padding:3px 5px 4px;
font-size:12px;
}
.medium
{
padding:6px 10px 7px;
font-size:16px;
}
.large
{
padding:8px 15px 10px;
font-size:20px;
}

/* button colours */
.blue {
background-color:#4479d4;
}
.blue:hover {
background-color:#1019a9;
}
.green {
background-color:#00c90d;
}
.green:hover {
background-color:#008209;
}
.red {
background-color:#f00f00;
}
.red:hover {
background-color:#a60000;
}