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 and Chrome 5.
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
Because our buttons are entirely generated, we can have multiple line buttons without worrying about the background getting artifacts.
button.g-button, a.g-button, input[type=submit].g-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; }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.
.g-button.scaled {-webkit-transform: scale(2); -webkit-transform-origin: bottom left;}.g-button.large {padding: 12px 20px; font-size: 21px; font-weight: bold;}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.
.g-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)));}