CSS Buttons: Designing Great Web Buttons with CSS3

CSS Button DesignThanks to CSS3 in today's modern browsers, a whole new range of designs that can be applied to links and web buttons are available. Great web buttons, CSS button tutorials and examples are populating the web. A great designed button is an effective way to attract a visitors attention when browsing your website, whether this intends to feature a special, free download or other call-to-action scenarios.

CSS Buttons

This tutorial will cover some easy steps on how you can create basic CSS buttons for your own use and how to create them with your own colors and sizes.

Button Color Examples

Hover over the below buttons to view their hover effect.

Button Button Button Button Button

A Basic CSS Link Button

To start setting up your button design, decide how your would like some CSS3 properties to display around the links text. Because our focus is to achieve the above 3D button effect, we will first create the flat version and will be using some of the following properties:

  • background-color - We will use a background color for our link
  • padding - The spacing from the text to the border of the background
  • border - The border frame color and size around the button, if we use it.
  • border-radius - The radius of the buttons corners.

Here is our buttons CSS which we place in the .button class:

a {
color: #333333;
text-decoration: none;
}
a.button {
background-color: #E3E3E3;
padding: 5px 15px;
border: 0;
border-radius: 5px;
}

That would output a flat colored background button with round corners:

Step 1

Adding CSS Gradient and Text-Shadow

Next, we would add the following properties for a stronger text and nicer background:

  • text-shadow - For a little text indent effect
  • background-image - We will use this for a CSS gradient, not an image

Here's how we added it to our class:

a.button {
background-color: #E3E3E3;
padding: 5px 15px;
border: 0;
border-radius: 5px;
text-shadow:0 1px white;
background-image: -webkit-linear-gradient(top, #F5F5F5, #D3D3D3);
}

And here is how it would look:

Step 2

3D Button CSS

Finally, we add the 3D Button effect, which we do with the box-shadow property to the button class, like so:

box-shadow:0px 5px 0px #828282, 0px 8px 5px rgba(0,0,0,0.3);

The above adds two shadows, separated by a coma. the first adds the 5px thick, dark grey color to the bottom and the second adds the 5px blurry shadow after that, resulting in:

Step 3

The first button state is now alive, and on the next page we will be will add the hover effect and coloring methods.

CSS Pressed Button Effect

To apply the pressed effect to the buttons hover state, we will just need to reduce the bottom shadow thickness while positioning the button a few pixels lower, equal to the reduced pixels from the shadow.

For that to work, we also add the position:relative; property to the default state, and add a top property to the hover state, as well as change the shadow values a little. We also add a darker shade for the backgroud-color.

a.button {
position:relative;
background-color: #E3E3E3;
padding: 5px 15px;
border: 0;
border-radius: 5px;
text-shadow:0 1px white;
background-image: -webkit-linear-gradient(top, #F5F5F5, #D3D3D3);
box-shadow:0px 5px 0px #828282, 0px 8px 5px rgba(0,0,0,0.3);
}
a.button:hover {
top: 3px;
background-color:#D3D3D3;
box-shadow:0px 2px 0px 0px #828282, 0px 5px 3px rgba(0,0,0,0.2);
}

Because we push the button down by 3px, we also reduce both shadows thickness by 3px, and reduce the blur of the second shadow by a few pixels as well for the desired effect:

The Button

Background Color Gradients

The best way to apply some cool button color gradient effects is to choose the desired color and the resulting color shades, darker and lighter, to then apply to the gradient and shadows accordingly. Let's look at a button example with the our themes color, #4471a9:

Blue Button

And the CSS class:

a.button-blue {
color: #ffffff;
text-shadow:0 1px black;
position:relative;
background-color: #4471a9;
padding: 5px 15px;
border: 0;
border-radius: 5px;
background-image: -webkit-linear-gradient(top, #5884BC, #395e8d);
box-shadow:0px 5px 0px #223955, 0px 8px 5px rgba(0,0,0,0.3);
}
a.button:hover {
top: 3px;
background-color:#395e8d;
box-shadow:0px 2px 0px #223955, 0px 4px 3px rgba(0,0,0,0.3);
}

On close look, you will see that all we change for the new colored button is the background-color,background-image and box-shadow. For the text properties, we change color and text-shadow for it to be more visible (optional, since you may choose to your a lighter colored button). Altogether, we require only 4 different color shades, including our main color. Here a breakdown of how to apply these colors codes:

We take our main color and grab one lighter shade, and 2 darker ones, hence, on a scale from 1-4, #3 is the main color, #4 is the lighter shade, #2 is one shade darker and #1 the darkest:

#1
#2
#3
#4

We apply these as follows:

a.button-blue {
background-color: #3;
background-image: -webkit-linear-gradient(top, #4, #2);
box-shadow:0px 5px 0px #1, 0px 8px 5px rgba(0,0,0,0.3);
}
a.button:hover {
background-color:#2;
box-shadow:0px 2px 0px #1, 0px 4px 3px rgba(0,0,0,0.3);
}

Color & CSS Gradient Resources

There are many websites that provide helpful tools to create a cross-browser compatible gradients as well as color shades, Here are two I can recommend:

Free CSS Buttons Download

Download the 5 different colored CSS buttons featured on the first page of this tutorial, including the cross-browser compatible CSS. If you enjoyed this tutorial please feel free to comment, share and add us to your Google Plus circles.

Download “CSS Buttons Download” CSS-Buttons-MB.zip – Downloaded 1021 times – 2 KB

I'm a developer at Maximus Business.

Leave a Reply

Please feel free to give us your feedback and comment below. Please keep in mind that comments are moderated. Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>