Lil Josh

CSS3 Google Buttons

February 23, 2012

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



The HTML

[html]



[/html]
Right click and save this search icon: 

The CSS3

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

Orange

[css]
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;
}
[/css]

Gray

[css]
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;
}
[/css]

Blue

[css]
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;
}
[/css]
If you like this tutorial please show me some love! Thank you. :]

CSS css3 design google buttons tutorials