In this tutorial, I’ll show you how to make Google buttons using CSS3. First here’s a demo:

Compose
LilJosh.com

The HTML

<button class="orange">Compose</button>
<button class="gray">LilJosh.com</button>
<button class="blue"><img src="search.png" /></button>

Right click and save this search icon: 

The CSS3

I’ve separated the CSS into 3 sections (for each color).

Orange

button.orange, a.orange, input[type=submit].orange {
	padding: 10px 30px;
	-webkit-border-radius: 2px 2px;
	border: solid 0px rgb(153, 153, 153);
	background: #d64937; /* Old browsers */
	background: -moz-linear-gradient(top,  #d64937 0%, #d14836 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d64937), color-stop(100%,#d14836)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d64937 0%,#d14836 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d64937 0%,#d14836 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d64937 0%,#d14836 100%); /* IE10+ */
	background: linear-gradient(top,  #d64937 0%,#d14836 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d64937', endColorstr='#d14836',GradientType=0 ); /* IE6-9 */
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-size:11px;
	line-height: 1;
}

button.orange:hover, a.orange:hover, input[type=submit].orange:hover {
	padding: 9px 29px;
	border: 1px solid #b0281a;
	background: #dd4b39; /* Old browsers */
	background: -moz-linear-gradient(top,  #dd4b39 0%, #c53727 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4b39), color-stop(100%,#c53727)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* IE10+ */
	background: linear-gradient(top,  #dd4b39 0%,#c53727 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4b39', endColorstr='#c53727',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0 1px 1px #333333;
	-moz-box-shadow: 0 1px 1px #333333;
	box-shadow: 0 1px 1px #333333;
}

button.orange:active, a.orange:active, input[type=submit].orange:active {
	padding: 9px 29px;
    border: 1px solid #b0281a;
    -webkit-box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee; 
}

Gray

button.gray, a.gray, input[type=submit].gray {
	padding: 10px 10px;
	-webkit-border-radius: 2px 2px;
	border: solid 1px #dadada;
	background: #f4f4f4; /* Old browsers */
	background: -moz-linear-gradient(top,  #f4f4f4 0%, #f1f1f1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%); /* IE10+ */
	background: linear-gradient(top,  #f4f4f4 0%,#f1f1f1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
	color: #555;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow: 0px 1px 1px rgba(255,255,255,1);
	line-height: 1;
	font-size:11px;
}

.gray:hover { 
	border:1px solid #c6c6c4; 
	background: background: #f8f8f8; /* Old browsers */
	background: -moz-linear-gradient(top,  #f8f8f8 0%, #f1f1f1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f8f8f8 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f8f8f8 0%,#f1f1f1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f8f8f8 0%,#f1f1f1 100%); /* IE10+ */
	background: linear-gradient(top,  #f8f8f8 0%,#f1f1f1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
	color: #222; 
	-webkit-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
	-moz-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
	box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
}
		
.gray:active { 
	border:1px solid #c6c6c4; 
	color: #222;
	-webkit-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
	-moz-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
	box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
}

Blue

button.blue, a.blue, input[type=submit].blue {
	padding: 10px 30px;
	-webkit-border-radius: 2px 2px;
	border: solid 1px #3079ed;
	background: #4d90fe; /* Old browsers */
	background: -moz-linear-gradient(top,  #4d90fe 0%, #4787ed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* IE10+ */
	background: linear-gradient(top,  #4d90fe 0%,#4787ed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#4787ed',GradientType=0 ); /* IE6-9 */
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-size:11px;
	line-height: 1;
}

button.blue:hover, a.blue:hover, input[type=submit].blue:hover {
	border: 1px solid #2f5bb7;
	background: #4d90fe; /* Old browsers */
	background: -moz-linear-gradient(top,  #4d90fe 0%, #357ae8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* IE10+ */
	background: linear-gradient(top,  #4d90fe 0%,#357ae8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d90fe', endColorstr='#357ae8',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0 1px 1px #333333;
	-moz-box-shadow: 0 1px 1px #333333;
	box-shadow: 0 1px 1px #333333;
}

button.blue:active, a.blue:active, input[type=submit].blue:active {
	border: 1px solid #377cea;
	-webkit-box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
	-moz-box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
	box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
}

If you like this tutorial please show me some love! Thank you. :]