Title: Styling pretty buttons with only CSS3

Date: Saturday, July 30, 2016

CSS3 is here and its nearly ready. Well to be honest, it is here. But unless you want to alienate all your visitors who arrive on the Internet Explorer boat, I can’t exactly recommend that its fully ready. However, despite this, it is still great to know that the majority of the other browsers (Chrome, Firefox 3+ and Safari) do actually support a vast amount of the new standards being introduced in the CSS3 specification.

Some of the most interesting and exciting newcomers to this specification allow developers to easily make things like Rounded Corners, Drop Shadows and Gradients without using a single image or bit of Javascript trickery.

What I am going to show here, is how you can use some of these new CSS3 properties to create lightweight, good looking buttons! The code we’ll be writing will be very easy to adjust. It will have completely flexible, so the buttons can be any size, ratio, color, font and you only need to edit the css file.

The properties I’ll be introducing include, the RGBA, border-radius, box-shadow, and the exciting linear-gradient. All these combined will be used to create the following button in pure CSS.

Example of css3 used to make a button

Example of css3 used to make a button

The above image is what you would see if you are using Chrome, Firefox 3+ and Safari. Unfortunately until the release of Internet Explorer 9, none of the IE family will render the buttons quite the same as above. As such I have thrown a few extras into this example to help with IE degradation.

You can see what a working example looks like in your browser here.

So to get started

The following code is all you will need in the html. It is very basic. Just an href with a class name of your choice. In this case, ‘button’.

<a href="#" class="button">A pretty button</a>

Then you will need to add the following code to your CSS stylesheet.

.button {
	line-height: 1;
	text-decoration:none;
	display: inline-block;
	padding: 8px 12px;
	font-family: Arial, sans-serif;
	text-transform:uppercase;
	font-size:22px;
	letter-spacing:1px;
	color:#fff;
	cursor:pointer;
}

This code creates the basic size and structure of the button and it is all standard CSS2 and is supported by all browsers.

Moving Along

Ok so the CSS still isnt finished. You will notice your button currently is lacking in all things ‘pretty’ like I promised in the title of the post. So, this next bit of code will need to be added to the button class you already have to extend its appearance.

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.40);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.40);
text-shadow: -1px -1px 0px rgba(0,0,0,0.15);

So what these properties do is add a border-radius which will create the nice rounded corners, it comes in two flavours. One for Mozilla and another for Webkit. You will need to include both properties for it to work across the browsers.

The box-shadow and text-shadow creates a drop shadow under the button or text. The settings for it are as follows: ‘distance from top’ ‘distance from right’ ‘size’ ‘color’.
The color uses a special new property in CSS3 which allows you to specify RGB + Alpha. This means the colors above are black (0,0,0) with a transparency of 40%. This means that no matter what color the background is, there will always be a dark shadow. To help you understand RGBA better, a light-green with 80% transparency would look like this rgba(170,206,134,0.80) easy huh!

The final bit of CSS needed to complete these buttons will create a gradient using CSS3, but it will also have a backup color and image for cases when CSS3 is not supported.

background: #76bbc5 url('../images/overlay.png') left top repeat-x; /* fallback color + image */
background-image: -moz-linear-gradient(100% 100% 90deg, #76bbc5, #9ecbd1);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9ecbd1), to(#76bbc5));

Whilst it may look complicated, its quite simple to understand really. Mozilla and WebKit, have again created their own variations of the gradient property, but the final result will still be the same.
You will notice the first line has a background color and image. This is just a simple fallback so the button doesn’t look completely devoid of color or style in Internet Explorer.

The properties for Gradient are pretty self explanatory. ‘Strength’ ‘Angle’ ‘Color from’ ‘Color to’. If you want to read more about Linear Gradients in CSS3 check out this article I wrote.

So thats basically the finished product. The only thing left to do is add in a couple of lines for the hover and start changing colors!

.button:hover {
	opacity:0.9;
}

/*COLOR VARIANTS*/
/* Just add the class green to your button to change the colors */
.green {
	background: #9dc773 url('../images/overlay.png') left top repeat-x; /* fallback color + image */
	background-image: -moz-linear-gradient(100% 100% 90deg, #9dc773, #afd18c);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#afd18c), to(#9dc773));
}

Wrapping up

So now that you can see how useful the new properties being released in css3 are, it might be time to start experimenting more and using them to create richer and better looking interfaces for your websites.

The code provided is very easy to adjust. its completely flexible, so the buttons can be any size, ratio, color, font and you only need to edit the css file.

You can view the final finished product here to get a better look at the code & download the source files.

Keep Reading

For more resources on CSS3 and properties used in this tutorial check out the following links:

Working with RGBA colour
Border-radius & rounded corners
Text-shadows in CSS3
Understanding CSS3 Gradients

Category: Articles

Tags: ,, , ,