Thanks 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 ButtonA 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 linkpadding
- The spacing from the text to the border of the backgroundborder
- 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:
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 effectbackground-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:
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:
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:
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
:
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:
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:
- ColorZilla Gradient Creator - A quick CSS gradient creator worth bookmarking.
- ColorHexa - Just type in an HTML color hex code and it will give you the shades.
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 1103 times – 2 KB