Create a Simple CSS3 Buttons

In designing a website or any other web application, one of important things and matters is button. Button will make your design look more attractive and eye-catching . So, in this first tutorial, I will explain how to simply create a simple CSS3 button, but still gorgeous and catchy in the end.

Step 1 – HTML

Let’s start with making the HTML’s markup first. In this tutorial, we’ll create a button with 4 different colors.

<a class="btn" href="#">Download</a>
<a class="btn blue" href="#">Download</a>
<a class="btn black" href="#">Download</a>
<a class="btn green" href="#">Download</a>

<a class="btn" href="#">Download</a>

<a class="btn blue" href="#">Download</a>

<a class="btn black" href="#">Download</a>

<a class="btn green" href="#">Download</a>

Preview

Step 2 – Basic CSS

Now, let’s start with the basic CSS, for the display of the button. This basic CSS include of structure, basic color, and basic size of the button we will make. In this step, we still not using the CSS3 property yet.

/*
 * 1. Hack for ie7
 * 2. Reset font-family
 * 3. Reset global line-height so it won't affect the button size
 * 4. Reset the text-decoration if you use anchor tags as button
 * 5. Remove outline when button pushed
 */
.btn {
	background: white;
    border: 1px solid #e6e6e6;
	color: #333;
	font-size: 16px;
	cursor: pointer;
	display: inline-block;
	*display: inline; /* 1 */
	*zoom: 1; /* 1 */
	font-weight: normal;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* 2 */
	line-height: 1; /* 3 */
	margin: 0;
	padding: 14px 24px;
	position: relative;
	text-decoration: none; /* 4 */
}

.btn:hover, .btn:focus {
	background: #f2f2f2;
	color: #333;
	text-decoration: none;
}

.btn:visited {
	color: #333;
}

.btn:active {
	outline: 0; /* 5 */
}

* 1. Hack for ie7

* 2. Reset font-family

* 3. Reset global line-height so it won't affect the button size

* 4. Reset the text-decoration if you use anchor tags as button

* 5. Remove outline when button pushed

.btn {

background: white;

border: 1px solid #e6e6e6;

color: #333;

font-size: 16px;

cursor: pointer;

display: inline-block;

*display: inline; /* 1 */

*zoom: 1; /* 1 */

font-weight: normal;

font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* 2 */

line-height: 1; /* 3 */

margin: 0;

padding: 14px 24px;

position: relative;

text-decoration: none; /* 4 */

}

.btn:hover, .btn:focus {

background: #f2f2f2;

color: #333;

text-decoration: none;

}

.btn:visited {

color: #333;

}

.btn:active {

outline: 0; /* 5 */

}

Preview

Step 3 – Button Color

Next is giving another color at the button. Like I said above, we’ll create button in 4 different colors, because we already have 1 color, which is white, thus we only need to create another 3 colors again. Please look again to the HTML markup that has been done, because there we already have classes for .blue, .black and .green.

/* Blue*/
.blue {
	background: #2d48c0;
	border: 1px solid #233997;
	color: white;
}

.blue:hover, .blue:focus {
	background: #2840ab;
	color: white;
}

.blue:visited {
	color: white;
}

/* Black*/

.black {
	background: #333333;
	border: 1px solid #1a1a1a;
	color: white;
}

.black:hover, .black:focus {
	background: #262626;
	color: white;
}

.black:visited {
	color: white;
}

/* Green*/

.green {
	background: #0fdb30;
	border: 1px solid #0cab26;
	color: white;
}

.green:hover, .green:focus {
	background: #0dc32b;
	color: white;
}

.green:visited {
	color: white;
}

/* Blue*/

.blue {

background: #2d48c0;

border: 1px solid #233997;

color: white;

}

.blue:hover, .blue:focus {

background: #2840ab;

color: white;

}

.blue:visited {

color: white;

}

/* Black*/

.black {

background: #333333;

border: 1px solid #1a1a1a;

color: white;

}

.black:hover, .black:focus {

background: #262626;

color: white;

}

.black:visited {

color: white;

}

/* Green*/

.green {

background: #0fdb30;

border: 1px solid #0cab26;

color: white;

}

.green:hover, .green:focus {

background: #0dc32b;

color: white;

}

.green:visited {

color: white;

}

Preview

Step 4 – CSS3 Properties

Now is the time to add some properties of CSS3. To make the button more attractive and eye-catching, we can add the gradient color, border-radius, text-shadow, and also box-shadow. If you still confuse or not familiar with these properties, you can learn more about them here.

Look again .btn that we have been created before. You can add those codes just like below.

/*
 * 1. Hack for ie7
 * 2. Reset font-family
 * 3. Reset global line-height so it won't affect the button size
 * 4. Reset the text-decoration if you use anchor tags as button
 * 5. Remove outline when button pushed
 * 6. Remove selection
 */

.btn {
	background: white;

	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
	background-image: -webkit-linear-gradient(#ffffff, #f2f2f2);
	background-image: -moz-linear-gradient(#ffffff, #f2f2f2);
	background-image: -o-linear-gradient(#ffffff, #f2f2f2);
	background-image: linear-gradient(#ffffff, #f2f2f2);

	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

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

    border: 1px solid #e6e6e6;
	color: #333;
	font-size: 16px;
	cursor: pointer;
	display: inline-block;
	*display: inline; /* 1 */
	*zoom: 1; /* 1 */
	font-weight: normal;
	font-family: Arial, 'Helvetica Neue';, Helvetica, sans-serif; /* 2 */
	line-height: 1; /* 3 */
	margin: 0;
	padding: 14px 24px;
	position: relative;
	text-decoration: none; /* 4 */

	-webkit-user-select: none; /* 6 */
	-moz-user-select: none; /* 6 */
	user-select: none; /* 6 */
}

.btn:hover, .btn:focus {
	background: #f2f2f2;
	color: #333;
	text-decoration: none;
}

.btn:visited {
	color: #333;
}

.btn:active {
	-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);

	outline: 0; /* 5 */
}

* 1. Hack for ie7

* 2. Reset font-family

* 3. Reset global line-height so it won't affect the button size

* 4. Reset the text-decoration if you use anchor tags as button

* 5. Remove outline when button pushed

* 6. Remove selection

.btn {

background: white;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

border: 1px solid #e6e6e6;

color: #333;

font-size: 16px;

cursor: pointer;

display: inline-block;

*display: inline; /* 1 */

*zoom: 1; /* 1 */

font-weight: normal;

font-family: Arial, 'Helvetica Neue';, Helvetica, sans-serif; /* 2 */

line-height: 1; /* 3 */

margin: 0;

padding: 14px 24px;

position: relative;

text-decoration: none; /* 4 */

-webkit-user-select: none; /* 6 */

-moz-user-select: none; /* 6 */

user-select: none; /* 6 */

}

.btn:hover, .btn:focus {

background: #f2f2f2;

color: #333;

text-decoration: none;

}

.btn:visited {

color: #333;

}

.btn:active {

-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);

-moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);

box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);

outline: 0; /* 5 */

}

And for the .blue, .black and .green , add the codes below.

/* Blue*/

.blue {
	background: #2d48c0;

	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2d48c0), color-stop(100%, #2840ab));
	background-image: -webkit-linear-gradient(#2d48c0, #2840ab);
	background-image: -moz-linear-gradient(#2d48c0, #2840ab);
	background-image: -o-linear-gradient(#2d48c0, #2840ab);
	background-image: linear-gradient(#2d48c0, #2840ab);

	border: 1px solid #233997;
	color: white;
}

.blue:hover, .blue:focus {
	background: #2840ab;
	color: white;
}

.blue:visited {
	color: white;
}

/* Black*/

.black {
	background: #333333;

	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #262626));
	background-image: -webkit-linear-gradient(#333333, #262626);
	background-image: -moz-linear-gradient(#333333, #262626);
	background-image: -o-linear-gradient(#333333, #262626);
	background-image: linear-gradient(#333333, #262626);

	border: 1px solid #1a1a1a;
	color: white;
}

.black:hover, .black:focus {
	background: #262626;
	color: white;
}

.black:visited {
	color: white;
}

/* Green*/

.green {
	background: #0fdb30;

	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0fdb30), color-stop(100%, #0dc32b));
	background-image: -webkit-linear-gradient(#0fdb30, #0dc32b);
	background-image: -moz-linear-gradient(#0fdb30, #0dc32b);
	background-image: -o-linear-gradient(#0fdb30, #0dc32b);
	background-image: linear-gradient(#0fdb30, #0dc32b);

	border: 1px solid #0cab26;
	color: white;
}

.green:hover, .green:focus {
	background: #0dc32b;
	color: white;
}

.green:visited {
	color: white;
}

/* Blue*/

.blue {

background: #2d48c0;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2d48c0), color-stop(100%, #2840ab));

border: 1px solid #233997;

color: white;

}

.blue:hover, .blue:focus {

background: #2840ab;

color: white;

}

.blue:visited {

color: white;

}

/* Black*/

.black {

background: #333333;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #262626));

border: 1px solid #1a1a1a;

color: white;

}

.black:hover, .black:focus {

background: #262626;

color: white;

}

.black:visited {

color: white;

}

/* Green*/

.green {

background: #0fdb30;

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0fdb30), color-stop(100%, #0dc32b));

border: 1px solid #0cab26;

color: white;

}

.green:hover, .green:focus {

background: #0dc32b;

color: white;

}

.green:visited {

color: white;

}

Preview

CSS3 Buttons

Step 5 – The Button Size

After done with the button color, now we’ll create the 3 different sizes of button. The first one will be the little one. Give the .small class. For the bigger size, give the .large class. And for the normal one, we don’t need to add any class because the basic size of button will be used as the normal size.

Firstly, add the class to identify the button size at our HTML markup.

<a class="btn small" href="#">Small</a>
<a class="btn" href="#">Normal</a>
<a class="btn large" href="#">Large</a>

<a class="btn small" href="#">Small</a>

<a class="btn" href="#">Normal</a>

<a class="btn large" href="#">Large</a>

Then, add the CSS code below into your CSS file.

.small {
	font-size: 13px;
	padding: 8px 18px;
}

.large {
	font-size: 24px;
	padding: 18px 35px;
}

.small {

font-size: 13px;

padding: 8px 18px;

}

.large {

font-size: 24px;

padding: 18px 35px;

}

Preview

The Final Result of Simple CSS3 Buttons

CSS3 Buttons

Conclusion

So, this is the end of our tutorial. Hopefully this tutorial can give you more knowledge, and it will be a useful tutorial for you. Kindly leave a comment, critic, or opinion here as a feedback. Happy trying. Good luck!

Download Demo