← Back to Home Page

Emulating "Google-style" Buttons

The original version of this article is archived if you would prefer that version.

This article features code examples in both Haml and HTML; Sass and CSS. If you are unfamiliar with Haml and Sass, please check out the Haml and Sass sites for more information and usage.

Note: All Haml examples in this article use the original, more Ruby-specific, attribute style versus the "HTML" style that is also available. All Sass is written in the original, non-SCSS, variant with prefixed colons on selectors. If you prefer to use a different Haml/Sass syntax, consult the above documentations on how to do so.

After reading Douglas Bowman's article Recreating the Button on Stopdesign, I was curious if I could create my own version of "Google-style" buttons using alternative techniques. I was also interested in finding out if I could do so with less mark-up and still have a consistent experience cross-browser.

The Recreating the Button article suggests an HTML structure along these lines:

<button>
  <span>
    button text
  </span>
</button>

(Note: The source article's example uses the <button> tag. For all forthcoming examples, I've opted to use the <a> tag instead.)

Using the resources already existent in modern browsers, and with the intent that over time newer browsers will have fuller implementation of various CSS 3 properties, I opted to remove the extra <span> tag from the above example and render everything with the single <a> tag and CSS.

Creating Buttons for Modern Browsers

Here is our baseline example button:

(Note: Hover and active states are also included.)

This is my button

It renders pretty consistently within the scope of modern browsers at the time of publication — i.e. Firefox 3.6, Safari 5, Chrome 5.

Below is the code used to create this button:

Toggle Code Type: Haml + Sass | HTML + CSS 
// Haml

%a.button{:href => '#'}
  This is my button


// Sass

.button
  :-moz-border-radius     3px
  :-webkit-border-radius  3px
  :background             white url('button.png') 0 0 repeat-x 
// Image fallback

  :background            -moz-linear-gradient(0% 170% 90deg, darken(white, 23%), white)
  :background            -webkit-gradient(linear, 0% 0%, 0% 170%, from(white), to(darken(white, 23%)))
  :border                 1px solid
  :border
    :color                darken(white, 10%) darken(white, 20%) darken(white, 20%) darken(white, 10%)
    :radius               3px
  :color                  darken(white, 75%)
  :display                inline-block
  :font
    :family              "helvetica neue", helvetica, arial, freesans, "liberation sans", "numbus sans l", sans-serif
    :size                 13px
  :outline                0
  :padding                5px 8px 5px
  :text
    :align                center
    :decoration           none
    :shadow               1px 1px 0 white
  :white-space            nowrap   

  &:hover
    :background          -moz-linear-gradient(0% 170% 90deg,darken(white, 28%), white)
    :background          -webkit-gradient(linear, 0% 0%, 0% 170%, from(white), to(darken(white, 28%)))
    :border-color         #99ccff
    :color                darken(white, 80%)

  &:active
    :position             relative
    :top                  1px

  &:active, &:focus
    :background-position  0 -25px
    :background          -moz-linear-gradient(0% 170% 90deg, white, darken(white, 13%))
    :background          -webkit-gradient(linear, 0% 0%, 0% 170%, from(darken(white, 13%)), to(white))
    :border-color         darken(#99ccff, 2%) darken(#99ccff, 1%) darken(#99ccff, 1%) darken(#99ccff, 2%)
    :color                darken(white, 90%)
    :text-shadow          1px -1px 0 rgba(255,255,255,0.5)

Currently, there is no support of the CSS 3 linear-gradient in Opera 10 or any version of Internet Explorer (version 8 or below.) While IE does have some gradient capability in its filter attribute, as this article on CSS-Tricks points out, it's not a perfect nor ideal solution.

Instead, to serve these other browsers a background image is used as a fallback.

Handling Internet Explorer

Is there a need to add further compatibility for IE? The short answer is not really. I prefer to follow the philosophy of graceful degradation. The buttons are already using a fallback image to work around a lack of CSS gradients. Generally, the buttons are functional and display practically the same in IE as all modern browsers. The only thing lacking is rounded corners with border-radius.

If there is a real concern about supporting border-radius, two alternative solutions are using javascript with something like dd_roundies.js or implementing an HTC behaviour file like CSS3Pie to render rounded corners.

Both options do the job in different ways. The real question should be whether having rounded corners is really a make-or-break aspect of your design. In most cases, it shouldn't be.

Extending Buttons

Our buttons are pure CSS and thus it's extremely easy to modify and expand upon what's been done in this article.

Here are a few variations on the design. View the page source to see how they're done.

Different font sizes Different colours Adding CCS 3 box-shadow
Pillbox left Pillbox middle Pillbox right With
multiple lines
of text Different radius