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 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

1	<a href="#" class="button green">button</a>

2

3	<a href="#" class="button blue">button</a>

4

5	<a href="#" class="button gray">button</a>

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.

1

.button {

2	display: inline-block;

3	position: relative;

4	margin: 10px;

5	padding: 0 20px;

6	text-align: center;

7	text-decoration: none;

8	font: bold 12px/25px Arial, sans-serif;

9

}

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

1

.green {

2	color: #3e5706;

3	background: #a5cd4e;

4

}

5

6	/* Blue Color */

7

8

.blue {

9	color: #19667d;

10	background: #70c9e3;

11

}

12

13	/* Gray Color */

14

15

.gray {

16	color: #515151;

17	background: #d3d3d3;

18

}

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

1

.button {

2	display: inline-block;

3	position: relative;

4	margin: 10px;

5	padding: 0 20px;

6	text-align: center;

7	text-decoration: none;

8	font: bold 12px/25px Arial, sans-serif;

9

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

11

12	-webkit-border-radius: 30px;

13	-moz-border-radius: 30px;

14	border-radius: 30px;

15

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

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

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

19

20	-webkit-transition: all 0.15s ease;

21	-moz-transition: all 0.15s ease;

22	-o-transition: all 0.15s ease;

23	-ms-transition: all 0.15s ease;

24	transition: all 0.15s ease;

25

}

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

1	/* Green Color */

2

3

.green {

4	color: #3e5706;

5

6	background: #a5cd4e; /* Old browsers */

7	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */

8	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */

9	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */

10	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */

11	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */

12	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */

13

}

14

15	/* Blue Color */

16

17

.blue {

18	color: #19667d;

19

20	background: #70c9e3; /* Old browsers */

21	background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */

22	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */

23	background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */

24	background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */

25	background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */

26	background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */

27

}

28

29	/* Gray Color */

30

31

.gray {

32	color: #515151;

33

34	background: #d3d3d3; /* Old browsers */

35	background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */

36	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */

37	background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */

38	background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */

39	background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */

40	background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */

41

}

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

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

2

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

4

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

CSS

1	/* Big Button Style */

2

3

.big {

4	padding: 0 40px;

5	padding-top: 10px;

6	height: 45px;

7	text-transform: uppercase;

8	font: bold 20px/22px Arial, sans-serif;

9

}

10

11	.big span {

12	display: block;

13	text-transform: none;

14	font: italic normal 12px/18px Georgia, sans-serif;

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

16

}

Step 5 Preview

Step 6 – Hover and Active State

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

1	.button:hover {

2	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);

3	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);

4	box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);

5

}

Hover State Preview

Active

1	.button:active {

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

3	-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);

4	box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);

5

}

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.