How to Create Stylish Buttons with CSS3

  • Article

Note  This topic was inspired by this blog post on ZURB.com, and optimized for Windows Internet Explorer 9.

 

With Cascading Style Sheets, Level 3 (CSS3) and Internet Explorer 9, you can create visually compelling buttons with just a little bit of markup. This topic shows you how to transform a simple hyperlink into a button styled completely with Cascading Style Sheets (CSS).

This topic includes the following sections:

  • A Starting Point
  • Adding Rounded Corners
  • Adding Drop Shadows
  • Adding a Transparent Gradient Overlay
  • Adding a Transparent Gradient Overlay as a Data URI
  • Putting It All Together
  • Related topics

This topic incorporates the following CSS3 features:

This topic also incorporates the following features first introduced in Windows Internet Explorer 8:

  • data Uniform Resource Identifiers (URIs)
  • transparent Portable Network Graphics (PNG)

A Starting Point

For this topic, we use the same coffee company example from the How to Add Rounded Corners with CSS3 box. We will change the" Order Now!" hyperlink in the brown order information horizontal bar after every product description into a button. The order Information bar currently appears as follows:

This rule is defined by the following class selector:

.product_orderinfo {
    text-align: right;
    display: block;
    padding: 5px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    background-color: #996633;
}

To start, let's make the "Order Now!" hyperlink into a basic rectangular button. For good contrast with the rest of the design, let's make the button blue. We'll also raise the height of the bar to accommodate a bigger button. The CSS for the basic button is as follows. (This selector has been declared so that any a element within an element that has a class of product_orderinfo has the listed declarations applied. This ensures it only applies to the "Order Now!" button within the bar.)

.product_orderinfo a {
    color: white;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none
    font-weight: bold;
    margin: 3px;
    background: #000099;
}

This makes the order Information bar appear as shown in the following image:

We'll also add the following selector to make the button turn brown when the cursor hovers over it:

.product_orderinfo a:hover {
    background: #663300;
}

This makes the button appear as follows when you hover your cursor over it:

You can view the revised page. You can also download its CSS file.

Now let's make this button shine with CSS3!

Adding Rounded Corners

First, let's add rounded corners with a radius of 5 pixels to the button. We do this by adding the border-radius property to the selector and assigning it the value of 5px. To ensure that other popular browsers can also see the rounded corners, we'll also add several vendor-prefixed properties. These new lines follow:

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

With these lines added, the button now appears as follows:

You can view the revised page. You can also download its CSS file.

Adding Drop Shadows

Next, we'll add a drop shadow to the button. We do this by adding the box-shadow property to the selector. As mentioned in the How to Add Rounded Corners with CSS3 topic, we need to specify the horizontal and vertical offsets of the shadow, as well as the color. We can also optionally specify the blur distance and the spread distance.

For our button, let's specify horizontal and vertical offsets of 1 pixel each, plus a blur distance of 3 pixels. We'll set the color to gray (a hexadecimal value of #999999). To ensure that other popular browsers can also see the drop shadows, we'll also add several vendor-prefixed properties. This appears within the selector as follows:

    box-shadow: 1px 1px 3px #999999;
    -moz-box-shadow: 1px 1px 3px #999999;
    -webkit-box-shadow: 1px 1px 3px #999999;

This makes the button appear as shown here:

You can view the revised page. You can also download its CSS file.

This looks good, but the shadow doesn't blend into the background color. This creates a thin gray band along the button's right and bottom borders. We can avoid this by taking advantage of another feature new to Internet Explorer 9: RGBA color values. RGB (red-green-blue) color values are a standard way to specify colors in browsers. RGBA (red-green-blue-alpha) values are identical, but have an "alpha" channel, or transparency, added.

We can replace the gray color value with an RGBA color value that makes the shadow black, but with 50% transparency. This makes the shadow blend into the background color. After adding the RGBA color value, this portion of the selector now appears as follows:

    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);

This makes the button appear as shown here. The shadow now blends nicely into the background color:

You can view the revised page by clicking here. You can also download its CSS file.

Adding a Transparent Gradient Overlay

Finally, we'll add a transparent gradient overlay that gives the button face some texture. Repeating the same 1-pixel-wide transparent vertical gradient across the length of your button will accomplish this with negligible bandwidth impact.

To apply the gradient to the button, add a reference to the gradient location as a url() value to the background property, and set it to repeat horizontally with a repeat-x value, as shown here:

    background: #000099 url("gradient.png") repeat-x;

This makes the button appear as follows:

To ensure the same effect when the cursor hovers over the button, we will need to update the following selector similarly:

.product_orderinfo a:hover {
    background: #663300 url("gradient.png") repeat-x;
}

You can view the revised page. You can also download its CSS file.

Adding a Transparent Gradient Overlay as a Data URI

Data URIs were first supported in Internet Explorer 8, and provide the ability to embed data items in-line in a webpage. One of the most common uses for data URIs is for embedding small images into a webpage. We can easily do this with the transparent gradient overlay from the previous section.

The first step is to convert the PNG image into a data URI. There are many web-based solutions and Classic Windows applications available to help you do this. Most involve either uploading or specifying the image file to the application, which then gives you the data URI to use. The data URI for the file "gradient.png" is as follows:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=

To use the data URI on the button, simply replace the name of the file ("gradient.png") in the background property value with the data URI. The background property now appears as follows:

    background: #000099 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;

We can also update the selector that defines the behavior of the button when the cursor hovers over it, as follows:

.product_orderinfo a:hover {
    background: #663300 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}

The button appears as shown here, which is identical to the previous image. Best of all, the button does not require a separate image file to be uploaded to your web server:

The button appears as shown here when the cursor hovers above it:

You can view the revised page. You can also download its CSS file.

Putting It All Together

Now you have seen how to add rounded corners, transparent drop shadows, and a transparent gradient overlay to a simple hyperlink to turn it into a stylish button. After all the changes described in the previous sections, the final selectors appear in the style sheet as follows:

.product_orderinfo a {
    color: white;
    background: #000099 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin: 3px;
}

.product_orderinfo a:hover {
    background: #663300 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}

How to Add Rounded Corners with CSS3

How to Add Drop Shadows with CSS3

CSS3