I guess most web sites are now using CSS to create nice looking buttons without using background images. Google has done a nice job creating clean looking buttons. I’ll show in this article how you can easily create similar looking buttons.
First regarding why it makes sense to use only CSS to create buttons instead of using background images:
- The browser does not need to load images. This makes the page loading process faster.
- It makes it easier to create scalable buttons which look good no matter how long the label on the button.
- You just need to adapt the CSS style in order to get different styles of buttons.
As far as I could see, Google seems to be using 4 types of buttons in Google Plus:
First we’ll style the first button as our default button (the one with the white background):
.google-plus-button {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
background-color: #fff;
border: 1px solid #d4d4d4;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
color: #404040;
cursor: default;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 28px;
line-height: 28px;
margin-right: 0;
min-width: 54px;
outline: 0 none;
padding: 0 8px;
position: relative;
text-align: center;
white-space: nowrap;
word-wrap: break-word;
}The user-select: none properties are used to prevent text selection (the browser doesn’t know it’s a button).
Also the rounded corners will be square in Internet Explorer 8 and lower as well as in Opera Mini. And the box shadows will be missing in these browsers too.
Also note that I’m using the default cursor for the button because it’s the way it is in Google Plus. But if you’d rather have the pointer cursor used for links, just replace:
cursor: default;by:
cursor: pointer;You might have noticed that the labels on the buttons look a little bit different than on Google Plus, because they use the Roboto font. If you want to use it, you’ll need to get it from Google Fonts. But I personally use Arial which is close enough and has the advantage of already being available pretty much on every machine without having to reference an external resource which can have an impact on page load time. Anyway, in order to use the Roboto font, add the following code to the <head> tag of your website:
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>And replace:
font-family: Arial, Helvetica, sans-serif;By:
font-family: Roboto, Arial, sans-serif;The next step is to add some styles so that it actually feels like a button:
.google-plus-button:hover {
background-color: #fff;
background-image: -moz-linear-gradient(center top , transparent, transparent);
border: 1px solid #b8b8b8;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
color: #404040;
}
.google-plus-button:active {
background: none repeat scroll 0 0 #e5e5e5;
border-right: 1px solid transparent;
-webkit-box-shadow: 0 2px 0 #ddd inset;
-moz-box-shadow: 0 2px 0 #ddd inset;
box-shadow: 0 2px 0 #ddd inset;
color: #262626;
}Now that we have our basic white button, we can style the other buttons which will get the red, green and blue classes:
.google-plus-button.green {
background-color: #53a93f;
border: 1px solid transparent;
color: #fff;
}
.google-plus-button.green:hover {
background-color: #65b045;
border-color: transparent transparent #4c8534;
-webkit-box-shadow: 0 -1px 0 #4c8534 inset;
-moz-box-shadow: 0 -1px 0 #4c8534 inset;
box-shadow: 0 -1px 0 #4c8534 inset;
}
.google-plus-button.green:active {
background: none repeat scroll 0 0 #3e802f;
border-color: #2f6124 transparent transparent;
-webkit-box-shadow: 0 1px 0 #2f6124 inset;
-moz-box-shadow: 0 1px 0 #2f6124 inset;
box-shadow: 0 1px 0 #2f6124 inset;
}
.google-plus-button.red {
background-color: #d73d32;
border: 1px solid transparent;
color: #fff;
}
.google-plus-button.red:hover {
background-color: #e74b37;
border-color: transparent transparent #bd3d2a;
-webkit-box-shadow: 0 -1px 0 #bd3d2a inset;
-moz-box-shadow: 0 -1px 0 #bd3d2a inset;
box-shadow: 0 -1px 0 #bd3d2a inset;
}
.google-plus-button.red:active {
background-color: #be3e2e;
border-color: #9a3323 transparent transparent;
-webkit-box-shadow: 0 1px 0 #9a3323 inset;
-moz-box-shadow: 0 1px 0 #9a3323 inset;
box-shadow: 0 1px 0 #9a3323 inset;
}
.google-plus-button.blue {
background-color: #427fed;
border: 1px solid transparent;
color: #fff;
}
.google-plus-button.blue:hover {
background-color: #4285f4;
border-color: transparent transparent #2f69c2;
-webkit-box-shadow: 0 -1px 0 #2f69c2 inset;
-moz-box-shadow: 0 -1px 0 #2f69c2 inset;
box-shadow: 0 -1px 0 #2f69c2 inset;
}
.google-plus-button.blue:active {
background: none repeat scroll 0 0 #2c56b1;
border-color: #21448d transparent transparent;
-webkit-box-shadow: 0 1px 0 #21448d inset;
-moz-box-shadow: 0 1px 0 #21448d inset;
box-shadow: 0 1px 0 #21448d inset;
}And here’s how you can use the buttons (the following code creates the four buttons at the top of the page):
<div class="google-plus-button">Add</div>
<div class="google-plus-button blue">Save</div>
<div class="google-plus-button red">Add</div>
<div class="google-plus-button green">Post comment</div>These buttons use the usual Google colors. But you can of course define colors which will better fit to the styles of your website but still provide the clean and polished look of the Google Plus buttons e.g.:
Feel free to leave a comment if you spot a problem, have a suggestion how to improve them or just like them.
Hi,
Thanks for the post and especially for explaining all those google + things in the very beginning of your post. I really liked it because I’ve been wondering for a while what the actual difference is. 🙂
Good Luck and keep the good work up!!