• Tweet

This tutorial demonstrates how to create simple scalable button using some of CSS3 properties such as border-radius and linear-gradient.

Basic Button Class:

First of all we can create a basic button class, without any color, so that we can use it with different colors.

.button {
	font-family: sans-serif;
	font-weight:bold;
	color: #fff;
	padding:5px 10px 6px 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
	cursor: pointer;
	}

In above code, we create rounded borders with border-radius for the mozilla, webkit and internet explorer browsers. If you want to learn more about border-radius property, please read this tutorial: CSS3: Creating Rounded Corners

Adding different colors:

Now that we have basic structure for the rounded corners button, we can use different colors with it, as we might need to use the same button with different colors.
Instead of adding simple background color, we can take advantage of CSS3 property of linear-gradient to create gradient effect on the button.
For example:

.blue {
	background:#0085cc;
	background-image: -moz-linear-gradient(top,#0085cc,#00717f);
	background-image: -webkit-gradient(linear,left top,
left bottom,from(#0085cc),to(#00717f)	);
	}

In the above code, we create a simple gradient for the Mozilla and Webkit browsers. We can also add the simple background color for the browsers which do not support the gradient property yet. If you are not familiar with linear-gradient property, you can learn more about it here: CSS3: Creating Linear Gradients

For the hover, we can specify a simple background color, or if you wish you can create similar gradient for the hover.

	.blue:hover{background:#00717f;	}

Similarly, we can make other color classes by using the colors of our choice. Please see the demo page where I have used different colors.

Button Sizes:

We can define different classes for the button sizes. All we need to do is to specify the font size.

.small {font-size:12px;}
.medium{font-size:18px;}
.large{font-size:24px;}

Done! How to use these buttons?

The buttons can be used as

<a class="button large blue">Click me!</a>
<a class="button medium blue">Click me!</a>
<a class="button small blue">Click me!</a>

Tested on:

Safari 5

FF 3.6

Opera 11

Chrome 8

IE 9

I hope you liked this tutorial. If you have any questions or comments, please leave a comment. Thanks =)