Stylin' Buttons

Creating a Realistic Looking Button with CSS3

Demo


<div id="anomalyinnovations">
  <a class="button left">
    <b class="o">
      <b class="m">
        <b>Post</b></b></b></a></p>
<div class="clear"></div>
</div>

The Devil is in the Details

The whole idea is to use a combination of subtle effects to create a three dimensional object. The idea is that:

  • the button is set into the canvas.
  • the texture of the button is different from the canvas and the surface is slightly raised.
  • the text of the button is pressed into it.

And the breakdown

  1. a simple gradient that is lighter at the top to show that the light source is above it and the surface is slightly raised. 
    a.button b.m{background: transparent url(button.png) repeat-x 0 0}
  2. a lighter border around it to show that light is reflecting off the edges. Here we are using CSS3 RGBA property. We need the alpha blending because the reflected light is far more visible at the top.
  3. a hard 1px border to show that light reflects off the to edge more than the other edges. 
    a.button b.m{border-width: 1px; border-style: solid; border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33)}
  4. a lighter 1px bottom border to create the effect that the button is sitting right in the canvas 
    a.button{border-width:1px; border-style:solid; border-color:transparent transparent rgba(255, 255, 255, 0.63)}
  5. a 1px border around the button to show the shadow of the button on the canvas, again using RGBA 
    a.button b.o{border: 1px solid rgba(0, 0, 0, 0.56)}
  6. and finally the shadow on the button text to shot that it is pressed into the surface 
    a.button b.m b{text-shadow:0 1px 0 #ddd; color:#262626}
  • more tips here
  • the simplest way to add a HOVER state to a button is lightening the background color. For the ACTIVE or MOUSEDOWN state of the button the effect we are trying to achieve is that of a raised surface pressed inwards. Hence, the lighting of the button should reflect that, and there are a couple of ways to do this.

  • here we are using the idea where the surface is pressed in, but the top edge doesn't move. instead of having the entire button moving in, just the raised part gets pressed in. we go from a convex shape to a concave shape when it is pressed, aka HOVER, ACTIVE, MOUSEDOWN, etc.
  1. Flip the gradient from before. the darker shade of the gradient is darker than the darkest shade of the previous gradient. this is important because the light hitting the bottom of the convex shape should reflect more than the light hitting the top of a concave shape 
    a.button:active b.m{background-position:0 -160px}