Gmail-esque Purely CSS Gradient Buttons

I've long been a fan of buttons that don't require images. I find images a bit tedious to work with especially when it comes down to the back and forth required between Photoshop and code when you want to make adjustments. The most minor of changes can have a dramatic impact to your layout.

Google's Gmail uses webkit to generate gradient buttons for their Archive, Report Spam, etc buttons. While that's fine for some browsers it won't work with IE. For IE they use div elements with some slick CSS code. I've attempted to recreate what Gmail does, but with considerably less code. These buttons will look great in most modern browsers and will scale perfectly using your browser's zoom feature.

<style type="text/css">
  body, div {margin: 0px; padding: 0px; font-size: 12pt; } 
  body { margin: 1em; } 
  div { font-family: arial; font-size: 88%; } 
  /* control width with another div container */ 
  .wrapper { width: 600px; } 
  .border_left { border-left: solid 1px #fff !important; }
  .last { margin-right: 1em; }        
  .button_container 
  { 
    float: left; 
    position: relative; 
    border: solid 1px #bbb; 
    overflow: hidden; 
    line-height: 1.8em; 
    height: 1.8em; 
    background-color: #efefef;
    cursor: pointer; 
  } 
  .button_top  
  {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 0.9em; 
    border-bottom: solid 2px #f7f7f7; 
    background-color: #fff; 
    line-height: 0.9em;
    width: 100%;
  } 
  .button_bottom  
  {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    padding-left: 1em; 
    padding-right: 1em;
    text-align: center; 
    height: 100%; 
    white-space: nowrap; 
    line-height: 1.8em;
  }
  .arrow 
  {
    background: url(images.png) no-repeat -36px 50%;
    width: 7px;
  }
</style>

My div buttons require just 3 divs, but I've included a fourth, wrapper class, to give some structure as the buttons are designed to use 100% width without it. I also include some simple CSS reset code to get rid of margins and whatnot.

This button_container class gives me the outer border and sets the size (height, line-height) of the button. Make sure overflow: hidden is set to hide elements that may otherwise be unruly.

Each button is actually two stacked divs. Since I use relative positioning in button_container, the absolute positions used in button_top and button_bottom will use button_container's top, left, and right coordinates. There is also a 2px bottom border on button_top to give a clean, gradient-like, effect when viewing the button.

Finally, the arrow class will display the dropdown arrow in a span.

<div class="wrapper">
  <div class="button_container" style="width: 68px">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <b>Archive</b>
    </div>
  </div>
  <div class="button_container border_left" style="width: 88px;">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Report Spam</span>
    </div>
  </div>
  <div class="button_container border_left" style="width: 56px;">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Delete</span>
    </div>
  </div>
  <div class="button_container border_left last" style="width: 90px;">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Mark as read</span>
    </div>
  </div>
  <div class="button_container" style="width: 72px">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Move to</span>
      <span class="arrow">&nbsp;</span>
    </div>
  </div>
  <div class="button_container border_left last" style="width: 66px;">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>Labels</span>
      <span class="arrow">&nbsp;</span>
    </div>
  </div>
  <div class="button_container last" style="width: 96px">
    <div class="button_top">&nbsp;</div>
    <div class="button_bottom">
      <span>More actions</span>
      <span class="arrow">&nbsp;</span>
    </div>
  </div>                
</div>

The final result looks like this in IE8:



Even if you like the look of images, these buttons will give you a professional looking layout while you code your application. Root around the code and check it out for yourself. Let me know what you think!