Copter Labs

Tweet

Creating buttons in CSS3 has become a lot easier with the majority of browsers supporting more of the CSS3 spec. In this tutorial we will go through an example of how to style a button with some fancy new CSS goodness.

View the Demo | Download the Source

Taming the CSS3 Beast

This style of button is scalable and utilises many of the best CSS3 properties. This tutorial will show you how to make awesome buttons without images

Properties Used to Create Awesome Buttons

The CSS3 used for this effect are supported in most modern browsers, (Firefox, Chrome, Safari and Opera). We'll be using the following CSS3 properties:

• Gradients
• Rounded Corners
• Text Shadow
• Box Shadow

We'll also use the HSLa colour format, (Hue, Saturation, Lightness/Luminosity, alpha transparency). For more information on CSS3, you can read the full spec roadmap from the W3C.

The HTML for this project is very simple, just a submit input type. This is the flexible base for all the CSS3 sauce to be poured over:

Very simple, and that is the beauty of CSS3. It gives you the ability to code seriously lightweight sites and web applications while avoiding the use of images whenever possible.

Next, let's look at the CSS that makes our button look oh-so-sexy:

html { background: #fff; }

input[type="submit"] {
    display: block;
    /*Fancy Gradient*/
    /* old browsers */
    background: #1E5799; 
    /* firefox */
    background: -moz-linear-gradient(top, hsl(212, 67%, 36%) 0%,
                                    hsl(207, 69%, 50%) 50%,
                                    hsl(208, 73%, 46%) 51%,
                                    hsl(206, 70%, 70%) 100%);
    /* webkit */
    background: -webkit-gradient(linear, left top, left bottom, 
                                 color-stop(0%, hsl(212, 67%, 36%)),
                                 color-stop(50%, hsl(207, 69%, 50%)),
                                 color-stop(51%, hsl(208, 73%, 46%)),
                                 color-stop(100%, hsl(206, 70%, 70%)));
    /* ie */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799',
                                                        endColorstr='#7db9e8',
                                                        GradientType=0 ); 
    
    padding: 6px 14px;
    color: hsl(212, 33%, 26%);
    border: 1px solid hsla(212, 67%, 36%, 0.5);
    font: bold 18px arial,helvetica,san-serif;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-box-shadow: 0 1px 1px hsla(209, 32%, 17%, 0.8),
                     inset 0 1px 1px hsla(0, 0%, 100%, 0.8);
    -moz-box-shadow: 0 1px 1px hsla(209, 32%, 17%, 0.8),
                     inset 0 1px 1px hsla(0, 0%, 100%, 0.8);
    box-shadow: 0 1px 1px hsla(209, 32%, 17%, 0.8),
                inset 0 1px 1px hsla(0, 0%, 100%, 0.8);
    text-shadow:0 1px 0 hsla(0, 0%, 100%, 0.5);
    cursor: pointer;
}

NOTE: As of writing there is a render bug in Chrome within Windows that causes the inset box-shadow to bleed over the border-radius. This has been fixed in the nightly builds (the developer versions) and will be pushed to users soon.

The Breakdown: What Does All that CSS Mean?

Gradients

The first unusual property you see in the CSS is the three instances of background. This is to provide an older browser fallback (no gradient), followed by vendor-specific syntax for Firefox and Webkit (Safari and Chrome), and lastly the very confusing IE filter. To generate these I used a great resource called the Ultimate CSS Gradient Generator, which makes for fool-proof, cross-browser gradients. I did, however, tweak the generated code to use the HSLa colour values.

Border Radius

The next CSS3 property used is border-radius. (Note that we only used one vendor prefix as Webkit seems to listen to the default property now.) This rounds the corners on an element and it means you can create rounded shapes like circles or odd shapes with various sizes of rounded corners, giving you full control over the look of your nice curved shapes.

For great in-depth look at how border-radius behaves and how to get the most out of it, head over to CSS3.info and their fantastic article

Box Shadow

The third CSS3 property is box-shadow. Again, this needs vendor prefixes to make all the supported browsers behave. Our implementation of box-shadow uses both standard and inset values — this gives the button the 3D look. The values used are horizontal offset, vertical offset, and blur radius, followed by the colour format of your choosing.

Let's take a look at the first set of values:

-webkit-box-shadow: 0 1px 1px hsla(209, 32%, 17%, 0.8),
                    ...;
-moz-box-shadow: 0 1px 1px hsla(209, 32%, 17%, 0.8),
                 ...;
box-shadow: 0 1px 1px hsla(209, 32%, 17%, 0.8),
            ...;

This creates a slightly grey semi-transparent shadow in a downward direction with a subtle blur with no horizontal movement. This gives the button a sense of depth.

Now let's examine the second set of values:

-webkit-box-shadow: ...,
                    inset 0 1px 1px hsla(0, 0%, 100%, 0.8);
-moz-box-shadow: ...,
                 inset 0 1px 1px hsla(0, 0%, 100%, 0.8);
box-shadow: ...,
            inset 0 1px 1px hsla(0, 0%, 100%, 0.8);

This gives the button the semi-transparent white highlight at the top, which adds an extra feeling of depth — a little more realistic look of upper lighting.

Text Shadow

The last CSS3 property is very similar to box-shadow. It uses the same values and order: horizontal offset, vertical offset, blur radius, and colour. This means you can use the same principals — in the example I've given the text a similar highlight to the top of the button, which carries the lighting aesthetic across all aspects of the style.

    text-shadow:0 1px 0 hsla(0, 0%, 100%, 0.5);

The Finished Button

With all these properties combined, we've managed to make a pretty stylish submit button. And it'll gracefully degrade in browsers that don't support CSS3. Check it out here:

View the Demo | Download the Source

Cook Up Some of Your Own CSS3 Awesome-Sauce

At this point, we've covered some of what is possible with new CSS3 styling properties, but that is only scratching the surface of what is possible. In subsequent posts I'll cover other possibilities provided by CSS3, such as pseudo-classes and adding images to the button using only CSS3.

How are you using CSS3 in your projects? Let me know in the comments!