CSS3 Google Buttons

Posted by:

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. :]

7

About the Author:

  Related Posts

Comments

  1. Nimsrules  February 24, 2012

    Wow, I’ve already been using this colour palette on my blog. These are great buttons. Thanks for sharing them :)

    reply
  2. bandhan  May 12, 2012

    It is very helpful tutorial. in short, it is awesome and really hot.

    reply
  3. Luca Vandro  May 25, 2012

    Great job! Why don’t you do sth like this for other input fields?

    reply
  4. Anonymous  July 19, 2012

    Hey. I just wanted to point out that you have an extra background attribute specified in the gray CSS example.

    This line:
    background: background: #f8f8f8; /* Old browsers */

    reply
  5. kurroman  July 5, 2013

    Thx a lot, really a nice job!

    reply
  6. Veerendra Raghuvanshi  September 16, 2013

    Really awesome, Great job , much appreciated

    reply
  7. promenum  April 25, 2014

    Awesome!!!

    reply

Add a Comment