Create beautiful CSS 3 buttons with Font Awesome

Hi everyone.

Today we are going to learn how to create some sweet delicious CSS3 buttons, combined with some great icons from Font Awesome.

Books Worth Reading:

Sponsored

If you don’t know what Font Awesome is, here is the official page.

First step

First what we need to do is download the package that contains the CSS file , and the font used to generate icons.

Second step

Create a html file and attach the font-awesome.css to it.

In the html file we are also going to attach the custom css for generating the css 3 buttons. Here is the code for the custom css file, where we also define the color and general styles of buttons:

[css] /*******************Body general styles*************************/

body{
font-family:Arial;
font-size:12px;
color:#484848;
}

.container{margin:0 auto; display:table; height:auto;}
.margin_top{margin-top:20px;}

/*******************Buttons general style*************************/

Books Worth Reading:

Sponsored

.button{

color: rgba(255,255,255,1);
text-decoration: none;

font-size: 1.5em;
display: block;
padding: 10px;
margin:10px 20px 10px 0;
float:left;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border:solid 1px #ffffff;

box-shadow: 0 0 3px 1px rgba(255,255,255,.8), 0 1px 0 rgba(0,0,0,.8);
-moz-box-shadow: 0 0 3px 1px rgba(255,255,255,.8), 0 1px 0 rgba(0,0,0,.8);
-webkit-box-shadow: 0 0 3px 1px rgba(255,255,255,.8), 0 1px 0 rgba(0,0,0,.8);

Books Worth Reading:

Sponsored

width: 180px;
text-align: center;

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

.button:hover{
-webkit-box-shadow: 0px 3px 9px rgba(0,0,0,.35);
-moz-box-shadow: 0px 3px 9px rgba(0,0,0,.35);
box-shadow: 0px 3px 9px rgba(0,0,0,.35);

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;

}
/*************************
Buttons gradient color styles generated with http://www.colorzilla.com/gradient-editor/
*************************/

Books Worth Reading:

Sponsored

.red{
background: #f25a58; /* Old browsers */
background: -moz-linear-gradient(top, #f25a58 0%, #d84240 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f25a58), color-stop(100%,#d84240)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f25a58 0%,#d84240 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f25a58 0%,#d84240 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f25a58 0%,#d84240 100%); /* IE10+ */
background: linear-gradient(to bottom, #f25a58 0%,#d84240 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f25a58′, endColorstr=’#d84240′,GradientType=0 ); /* IE6-9 */
}

.blue{
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#87e0fd’, endColorstr=’#05abe0′,GradientType=0 ); /* IE6-9 */
}

.orange{
background: #ffaf4b; /* Old browsers */
background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffaf4b’, endColorstr=’#ff920a’,GradientType=0 ); /* IE6-9 */
}

.green{
background: #d2ff52; /* Old browsers */
background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* IE10+ */
background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d2ff52′, endColorstr=’#91e842′,GradientType=0 ); /* IE6-9 */
}
[/css]

Third step

The html file should look something like this

[html]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS 3 and Font Awesome Amazing Buttons</title>
<link href=”css/font-awesome.css” rel=”stylesheet”>
<link href=”css/style.css” rel=”stylesheet”>
</head>

Books Worth Reading:

Sponsored

<h1>CSS 3 and Font Awesome Amazing Buttons. Tutorial by <a href=”http://herowp.com” target=”_blank”>GraphicXtreme</a></h1>

<!–Red styles –>
<a class=”button red” href=”#”> Glass button</a>
<a class=”button red” href=”#”> Music button</a>
<a class=”button red” href=”#”> Search button</a>
<a class=”button red” href=”#”> Envelope button</a>
<a class=”button red” href=”#”> Heart button</a>
<a class=”button red” href=”#”> Star button</a>
<!–Red styles –>

<!–Blue styles –>
<a class=”button blue” href=”#”> Glass button</a>
<a class=”button blue” href=”#”> Music button</a>
<a class=”button blue” href=”#”> Search button</a>
<a class=”button blue” href=”#”> Envelope button</a>
<a class=”button blue” href=”#”> Heart button</a>
<a class=”button blue” href=”#”> Star button</a>
<!–Red styles –>

<!–Orange styles –>
<a class=”button orange” href=”#”> Glass button</a>
<a class=”button orange” href=”#”> Music button</a>
<a class=”button orange” href=”#”> Search button</a>
<a class=”button orange” href=”#”> Envelope button</a>
<a class=”button orange” href=”#”> Heart button</a>
<a class=”button orange” href=”#”> Star button</a>
<!–Orange styles –>

Books Worth Reading:

Sponsored

<!–Green styles –>
<a class=”button green” href=”#”> Glass button</a>
<a class=”button green” href=”#”> Music button</a>
<a class=”button green” href=”#”> Search button</a>
<a class=”button green” href=”#”> Envelope button</a>
<a class=”button green” href=”#”> Heart button</a>
<a class=”button green” href=”#”> Star button</a>
<!–Green styles –>

</div>

</body>
</html>

[/html] [column size=fourth position=first ][button color=green size=large url=”http://herowp.com/tutorials/css3buttons” target=”blank”]Final Product[/button][/column] [column size=fourth position=first ][button color=orange size=large url=”http://herowp.com/tutorials/css3buttons.zip” target=”blank”]Download example[/button][/column]

Create beautiful CSS 3 buttons with Font Awesome

First step

Second step

Third step

You may also like

Polo Shirt Mockup – The Complete Collection

Front and Back Tshirt Mockup – The Complete Collection

Get in touch