In an attempt to buff up my CSS3 skills and just keep myself thinking 'outside the box' I've decided to start a run of CSS3 button posts. In these posts I will try to recreate buttons that I have found using only code. These may not always being semantic or even reasonable, but they should be interesting and a good excersize in CSS3.

Keep in mind that since these will be CSS3 heavy, the best experience will be in the latest builds of Chrome, Safari or Firefox.

The first button

see the button in action /// view the dabblet

The markup contains two elements; one <a> and one <span> element. It could have been done with one image if the outermost border hadn't been a gradient.

A rough outline of the design vs elements would look like this:

• a : the outermost border
• span : solid dark border via box-shadow, lighter border with a border, gradient background
• span::after : the gloss overlay on the upper part of the button

When the user hovers over the button we simply hide the ::after psuedo element and change the gradient on the button background.

HTML

<a href="#">
  <span>push</span>
</a>

CSS

a {
  background-image: -moz-linear-gradient(bottom, #dd513c 0%, #ae251b 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dd513c), color-stop(1, #ae251b));
  border: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: inline-block;
  margin-top: 120px;
  padding: 4px;
}

  a span {
    background-image: -moz-linear-gradient(bottom, #ac1116 0%, #e64b30 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ac1116), color-stop(1, #e64b30));
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
    border: 2px solid #e04a34;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    color: white;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 12px;
    position: relative;
    text-shadow: 0 -1px 0 #770900;
  }

    a span::after {
      background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(255, 255, 255, 0)));
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      content: "";
      display: block;
      height: 50%;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }

  a:hover span {
    background-image: -moz-linear-gradient(bottom, #de452d 26%, #a00411 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.26, #de452d), color-stop(1, #a00411));
  }

    a:hover span::after {
      display: none;
    }