Roll Your Own Google Buttons

Google recently redid the search homepage with some new buttons. The coolest thing? No images required at all.

Note: Demo works best in Safari 4.x, Chrome, and Firefox.

Creating the Standard Buttons

Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection.

The buttons use the -webkit-gradient function, which takes in arguments for the gradient start and stop points as well as color and then creates what the browser basically considers an image. That means we can use gradients anywhere we could use images, including backgrounds and even borders (with border-image).

Anchor Button

Standard buttons based on the <button> and <a> elements

Standard button, which much
longer lines, centered

Because our buttons are entirely generated, we can have multi-line buttons without worrying about the background getting artifacts.

.google.button {
  padding: 6px 10px;
  -webkit-border-radius: 2px 2px;
  border: solid 1px rgb(153, 153, 153);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
  color: #333;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-shadow: 0px 1px 1px rgba(255,255,255,1);
  line-height: 1;
}

Scaling the Buttons

Because these buttons are generated entirely with vector objects and borders they can be scaled to any size.

We can use both -webkit-transform to scale the image up directly, outside the DOM (as in example 1) or by increasing the button dimensions, padding and font-size (as in example 2).

Scaled Button

Example 1: A button scaled using a transform, class="scaled"

Large Button

Example 2: A button scaled using a class="large" with more padding, larger font size.

.google.button.scaled {
  -webkit-transform: scale(2); -webkit-transform-origin: bottom left;
}
 
.google.button.large {
  padding: 12px 20px; font-size: 21px; font-weight: bold;
}

Buttons with Color

Adding colored buttons is easy, because we're only changing gradient color stops and border colors. In this case we've made classes for each button color using RGBa colors, but -webkit-gradient works just fine with hex colors as well.

.google.button.blue {
  border-color: rgb(98,202,227)
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227)));
}

Copyright ZURB, freely available for distribution under the MIT license.


Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×