How to Create CSS3 Buttons

• 3 minutes READ

How to Create CSS3 Buttons [Tutorial]

Topic: CSS3
Difficulty: Beginner
Estimated completion time: 30 mins

In this tutorial we will be making some cool CSS3 buttons. They are based on the Futurico User Interface and we will try to make a precise copy of them. Let’s get started…

Step 1 – HTML

The HTML is very simple, we’ll just create 3 anchor tags with the class of ‘button’ and since we will create three different colors styles we will give to each link a different color class

	<div id="css">
		<img src="img/css.png" alt="title image">
		<a href="#" class="button big green">sign in <span>One minute</span></a>
		<a href="#" class="button big blue">sign in <span>One minute</span></a>
		<a href="#" class="button big gray">sign in <span>One minute</span></a>
		<a href="#" class="button green">button</a>
		<a href="#" class="button blue">button</a>
		<a href="#" class="button gray">button</a>
	</div>

Step 1 Preview

Step 2 – Basic CSS Styling

Now we will start to give the basic shape and styles for the buttons. We’ll use the ‘display: inline-block’ property to be able to use it as a block element and to tolerate others HTML elements next to it. The others properties are basic CSS2 styles, you should not have difficulty to understand them.

.button {
	display: inline-block;
	position: relative;
	margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	font: bold 12px/25px Arial, sans-serif;
}

Before getting in the CSS3 part let’s just add some basic background and text colors for each color style.

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates
.green {
	color: #3e5706;
	background: #a5cd4e;
}

/* Blue Color */

.blue {
	color: #19667d;
	background: #70c9e3;
}

/* Gray Color */

.gray {
	color: #515151;
	background: #d3d3d3;
}

Step 2 Preview

Step 3 – CSS3 Styling

Let’s start the fun part! Now we’ll add the rounded corners, shadows, and basic animations. You will notice that we will use various prefixes for each browser. This is required because this properties are in tests in some browsers and we need to add prefixes to target them

.button {
	display: inline-block;
	position: relative;
	margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	font: bold 12px/25px Arial, sans-serif;

	text-shadow: 1px 1px 1px rgba(255,255,255, .22);

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

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

Step 3 Preview

Step 4 – CSS3 Background Colors

In this part we’ll add CSS3 background gradients for each color style. If you want to create more background gradients just change the colors

/* Green Color */

.green {
	color: #3e5706;

	background: #a5cd4e; /* Old browsers */
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}

/* Blue Color */

.blue {
	color: #19667d;

	background: #70c9e3; /* Old browsers */
	background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
	background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}

/* Gray Color */

.gray {
	color: #515151;

	background: #d3d3d3; /* Old browsers */
	background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
	background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

Step 4 Preview

Step 5 – Create Big Buttons

To create the big buttons style we’ll add a ‘big’ class and a span tag with some text.

HTML

<a href="#" class="button big green">sign in <span>One minute</span></a>

<a href="#" class="button big blue">sign in <span>One minute</span></a>

<a href="#" class="button big gray">sign in <span>One minute</span></a>

CSS

Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products
/* Big Button Style */

.big {
	padding: 0 40px;
	padding-top: 10px;
	height: 45px;
	text-transform: uppercase;
	font: bold 20px/22px Arial, sans-serif;
}

.big span {
	display: block;
	text-transform: none;
	font: italic normal 12px/18px Georgia, sans-serif;
	text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

Step 5 Preview

Step 6 – Hover and Active State

For the hover and active sate we’ll just edit the box-shadows.

Hover

.button:hover {
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
	box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}

Hover State Preview

Active

.button:active {
	-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
	-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
	box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}

Active State Preview

Conclusion

That’s it! We’ve finished our CSS3 buttons. Hope you like it and don’t forget to live some feedback in the comments.

Preview

Download CSS3 Buttons

Valeriu Timbuc

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc.

Posts by Valeriu Timbuc