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).
Standard buttons based on the <button> and <a> elements
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).
Example 1: A button scaled using a transform, class="scaled"
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.
Check out other Playground experiments
Foundation CSS Grid Examples
Foundation CSS Grid + Container Queries
Foundation Grids within Grids
Reactive Animation Listener
