You’ve probably saw that Google chaged his design, and they bring us the new buttons, they are big grey buttons – simple and ergonimic.

In this tutorial I’m gonna show you how to recreate the same buttons, with the same effect as the original ones.

We will start with the CSS of the block button, wich will define the margin colors of the button, display type and the height.

.buttonblock {
display: block;
border: 1px solid #999;
height: 30px;
border-color: #ccc #999 #999 #ccc;
}

How we are going to define the content of the button, like the gradient background, font type, font color and font size and also the mouse pointer on hover.

.button {
background: url(gradient.png) repeat-x;
width: 148px; /*Here we have -2 pixels, because of the margins wich are 1 pixel on each side*/
font: 15px arial,sans-serif;
color: #000;
cursor: pointer;
height: 30px;
margin: 0;
outline: 0;
border: 0;
}

Ok, now the buttons looks pretty good, but we still need the pressed effect, wich shows the button like it’s pressed (a dark grey color)

This is a very easy, here’s the CSS code:

.button:active {
background: #ccc;
}

We are almost with the stylesheet, the only thing left is the display type of the buttons, please note that this is an important step in order to proper look in Internet Explorer (verified on IE8, and 9).

.inline{
width: 150px;
display: inline-block; 
}

The background picture used in the above CSS code (gradient.png) is the following one (ofc. you can create your own using photoshop or another editor):

Ok, we are done with the CSS, now we are going to make the HTML part, where we will set the span’s and the button, first we will spawn the inline css, then the block and after that, we create the button with the background and everything else.

<center>
<span class="inline">
<span class="buttonblock">
<input name="first" type="submit" value="Search them all!" class="button">
</span>
</span>
</center>

This is my result, yours should be the same: Demo Google Button (Tested and worked on Internet Explorer 9, Google Chrome 10 and Firefox 3.6/4)

Download this tutorial