Gmail-style buttons with no images

Earlier this week, Gmail rolled out new buttons to the site. As I understand it, these buttons are meant to make the UI more consistent across browsers, and make the experience more streamlined.

These buttons have a gradient background, making them appear rounded, and they are grouped together in “pills”, to keep related actions together. The buttons on the ends of the pills have slightly rounded corners. The cool thing about these rounded corners is that they are pure HTML/CSS (they don’t use any images) and they work in all browsers (unlike the firefox-specific -mox-border-radius directive). The drawback is that you can only get slight rounding; no a gradual curve. Also, the markup is far from simple.

I thought they looked pretty sweet, so I got to wondering how difficult it would be to try them myself. Douglas Bowman, from Google, wrote a post about how these new buttons evolved. He didn’t come out and say how they were done int he final result, but he did invite people to reverse-engineer the new buttons. I decided to take him up on that invitation.

[ad]

So, my solution is very similar to Gmail’s, but not exact. It uses the same method of creating the gradient and the rounded corners, which are the most complex parts of the whole thing. I made it easy to mark which button is the primary action, and have the appearance of the buttons change depending on whether the mouse is hovering over or clicking on the buttons. For example, in the following screenshot:

  • The ‘Archive’ button is marked as the primary action.
  • The ‘Report spam’ button is shown as it would if it were being clicked.
  • The ‘Delete’ button looks as if the mouse were currently hovering over it.

The HTML markup looks like this:

<span class="pk-button">
  <span class="outer-box">
    <span class="inner-box">
      <span class="pos">
        <span class="top-shadow"></span>
        <span class="content">I am by Myself</span>
      </span>
    </span>
  </span>
</span>

The class ‘pk-button’ just sets this apart in the CSS. You can easily change that if you like. To mark the button as either a primary action, being hovered, or being clicked, just add the ‘primary’, ‘hover’, or ‘click’ class names to the outer-most span. You can (and will probably have to) add the ‘click’ and ‘hover’ classes with javascript, since the psuedo-classes ‘:hover’ and ‘:active’ don’t work for tags other than <a> in Internet Explorer.

To group the buttons into “pills”, add the class name ‘collapse-right’ to the button on the left side of the pill (the one with its right border collapsed), and ‘collapse-left’ to the button on the right side of the pill. Add both of these classes to buttons in the middle of the pill (with both sides collapsed).

The CSS is pretty lengthy, so I won’t paste it in here, but you can check it out on my demo page.

Let me know what you think, and if you can think of ways to make it better!

This entry was posted in computers and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Posted February 10, 2009 at 12:44 am | Permalink

    Good start but they’re not as stable as Google’s buttons. Things get messy when you start increasing text size.

  2. Posted February 10, 2009 at 3:13 am | Permalink

    Yes, you are right; this isn’t a full implementation of Gmail’s buttons. In addition, I never got to implementing their drop-down menu buttons, which in many ways is the coolest part of this UI re-design.

    Perhaps I will spend some more time improving my implementation.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>