How To Create Buttons Like Google Chrome With CSS3? (Cross Browser)

Google Chrome is now at the top in the browser war and its usage is increasing day by day. It is now the most popular and powerful browser on the planet beating Mozilla Firefox and Internet Explorer, Safari etc. The most lovable thing about google chrome is it’s super clean interface. So, getting inspired from it’s interface, I will help you in creating buttons like google chrome uses for its own designs. You must have noticed such buttons in it’s preferences menu. So, lets create this beautiful button with only one CSS class, adding effects with the help of CSS3.

CSS Code

/*--set the button design--*/
.chrome-button {
  text-decoration:none;	

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#fafafa), to(#e5e5e5));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fafafa, #e5e5e5);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fafafa, #e5e5e5);
  /* IE 10 */
  background: -ms-linear-gradient(top, #fafafa, #e5e5e5);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fafafa, #e5e5e5);

  border: 1px solid #aaa;
  color: #444;
  font-size: inherit;
  margin: 0;
  min-width: 4em;
  padding: 3px 12px;
}

/*--mouse over effect--*/
.chrome-button:hover {
  text-decoration:none;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#fefefe), to(#fefefe));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fefefe, #e9e9e9);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fefefe, #e9e9e9);
  /* IE 10 */
  background: -ms-linear-gradient(top, #fefefe, #e9e9e9);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fefefe, #e9e9e9);

  border-color: #999;
  color: #222;
}

/*--Set active behaviour of the button, when you click on it--*/
.chrome-button:active {
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#f4f4f4), to(#dcdcdc));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #f4f4f4, #dcdcdc);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #f4f4f4, #dcdcdc);
  /* IE 10 */
  background: -ms-linear-gradient(top, #f4f4f4, #dcdcdc);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #f4f4f4, #dcdcdc);

  color: #333;
}

/*--Set the button disabled designed--*/
.chrome-button[disabled], .chrome-button[disabled]:hover {
  text-decoration:none;	

  -webkit-box-shadow: none;
  -moz-box-shadow:none;
  box-shadow:none;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#fafafa), to(#e5e5e5));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fafafa, #e5e5e5);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fafafa, #e5e5e5);
  /* IE 10 */
  background: -ms-linear-gradient(top, #fafafa, #e5e5e5);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fafafa, #e5e5e5);

  border-color: #aaa;
  color: #888;
}

/*--to make small buttons, prior to existing design--*/
.small{font-size:0.8em; padding:2px 5px;}

HTML Code

Apply the above css class like the way I added below for big and small sized button styles for both normal and disabled mode.

Big size normal button html code

Download Google Chrome

Small size normal button html code

Download Google Chrome

Big size disabled button html code

Download Google Chrome

Small size disabled button html code

Download Google Chrome

Cross Browser Debate

I have tried to make this design consistent over all browsers but not willing to make any solution for old versions of Internet Explorer nor IE9. Though, I have made it to work with latest version of IE, that is IE 10. It works beautifully in all of the top browsers. Please checkout the live demo below.

Please note that even though the post title says cross browser but I have not added any support for IE 5 <> 9. The design of these buttons are compatible to IE 10, which is coming up with enough of good CSS3 support.

Live Demo

I am sure you would love to see this button in live demo. Please click the live demo button below. Please post your questions in comments below.

Related posts: