Creative Design Magazine

Creative Design Magazine

Pretty CSS3 Buttons

The Objective of this tutorial is to create a set of button styles that are cross browser compliant, can degrade gracefully for non CSS3 compliant browsers and are are entirely scaleable, meaning that you can make it a variety of sizes and colours with ease.
This tutorial lends its self heavily from the Super Awesome Buttons tutorial from Zurb, with some insightful and useful alterations and additions.

CSS3 Button That Degrades Nicely

There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript.
As it stands a lot of the modern browsers support the CSS we would like to use to create a nice looking button. Firefox, Safari and Opera all have support for rounder corners, box shadows and text shadows.
What used to take six steps and lots of extra mark-up, images and css, now only takes three steps and some simple CSS3.

Dynamic Buttons With CSS3

The example in this tutorial demonstrate how to create nice looking, dynamic buttons that are fully scaleable using the CSS3 properties border-radius, box-shadow and RGBa.
By using RGBa color values, the button and text shadows will always blend well with any color you choose for your button, no matter if you want the button to be green, red or blue – The code will always remain the same.