A new version of Inspect Element is coming soon! Subscribe to the newsletter for updates. Subscribe

Create a Slick CSS3 Button with box-shadow and rgba

When redesigning my new site, I experimented with creating a realistic behaving button with CSS3. You can see it in action on the contact page. It was created mainly with the use of different box-shadow values for the static state and the active state to mimic the real behaviour of a typical button.

Press me to see the demo page

First of all it’s nothing more than a simple link with a class of button.

<a class="button" href="#">Button</a>

Now the good stuff, the CSS that makes it happen.

.button {
    -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

You probably recognise the border-radius property by now but what exactly is going on with the box-shadow property? There’s a lot of numbers there because it’s creating 2 separate shadows. You can see each shadow separated by the comma. Let’s have a look in more detail.

The Structure of box-shadow

As you can see with the first shadow, we’re setting it to inset so the shadow appears inside our element. To create the shadow outside our element, you need to omit inset all together. Nothing needs to take it’s place as an outside shadow is the default.

The x-offset tells the browser how far to move the shadow horizontally and the y-offset vertically just as you’re used to doing with background image positioning. The value which follows that however, gives you control over the blur of the shadow. For our button we’re creating a fake 3D effect with the first shadow set to black in rgba with an alpha value of 0.45 giving the impression that it is coming off the page. The alpha value is just right to let some of the colour of the button to come through as though less light is bouncing off it.

The second shadow completes the 3D effect by creating a shadow where the light is being blocked by the button itself. It’s very simple but works really well. Both shadows are declared in the single box-shadow property separated by a comma.

The :active State

On the :active state, we want to fake the button being pressed and show it going slightly underneath the hole it is contained within. To do this we use some different box-shadow values as follows:

.button:active { position: relative; top: 3px;
    -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
}

You’ll notice that the first line moves the button down 3 pixels creating the effect of the button being pressed down. The first shadow is white and effectively hides the bottom 3 pixels of the button as if it is hidden by the layer surrounding it. Unfortunately this needs to be the same colour as the background containing the button meaning it doesn’t work well on textured backgrounds. Also this creates a couple of unwanted pixels around the edge as you can see in the screenshot above.

This can be fixed with an :after pseudo-element which basically creates a small block of white (or your background colour covering over the offending pixels. Don’t forget to position the button relative so you can absolutely position the pseudo-element.

.button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }

Then the next shadow generates a subtle inset effect around the edge of the button. Notice how the new declaration of box-shadow overwrites the previous one, therefore also removing the outside shadow.

On the demo page, I’ve added some gradients with the help of CSS so if you’re interested please view the source. If you have any ideas for improving the button, please leave a comment.

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: