Create beautiful CSS 3 buttons with Font Awesome

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.

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

.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);

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

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

<body>
<div class=”container margin_top”>

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

<!–Red styles –>
<a class=”button red” href=”#”><i class=”icon-glass”></i> Glass button</a>
<a class=”button red” href=”#”><i class=”icon-music”></i> Music button</a>
<a class=”button red” href=”#”><i class=”icon-search”></i> Search button</a>
<a class=”button red” href=”#”><i class=”icon-envelope”></i> Envelope button</a>
<a class=”button red” href=”#”><i class=”icon-heart”></i> Heart button</a>
<a class=”button red” href=”#”><i class=”icon-star”></i> Star button</a>
<!–Red styles –>

<!–Blue styles –>
<a class=”button blue” href=”#”><i class=”icon-glass”></i> Glass button</a>
<a class=”button blue” href=”#”><i class=”icon-music”></i> Music button</a>
<a class=”button blue” href=”#”><i class=”icon-search”></i> Search button</a>
<a class=”button blue” href=”#”><i class=”icon-envelope”></i> Envelope button</a>
<a class=”button blue” href=”#”><i class=”icon-heart”></i> Heart button</a>
<a class=”button blue” href=”#”><i class=”icon-star”></i> Star button</a>
<!–Red styles –>

<!–Orange styles –>
<a class=”button orange” href=”#”><i class=”icon-glass”></i> Glass button</a>
<a class=”button orange” href=”#”><i class=”icon-music”></i> Music button</a>
<a class=”button orange” href=”#”><i class=”icon-search”></i> Search button</a>
<a class=”button orange” href=”#”><i class=”icon-envelope”></i> Envelope button</a>
<a class=”button orange” href=”#”><i class=”icon-heart”></i> Heart button</a>
<a class=”button orange” href=”#”><i class=”icon-star”></i> Star button</a>
<!–Orange styles –>

<!–Green styles –>
<a class=”button green” href=”#”><i class=”icon-glass”></i> Glass button</a>
<a class=”button green” href=”#”><i class=”icon-music”></i> Music button</a>
<a class=”button green” href=”#”><i class=”icon-search”></i> Search button</a>
<a class=”button green” href=”#”><i class=”icon-envelope”></i> Envelope button</a>
<a class=”button green” href=”#”><i class=”icon-heart”></i> Heart button</a>
<a class=”button green” href=”#”><i class=”icon-star”></i> Star button</a>
<!–Green styles –>

</div>

</body>
</html>

[/html]

2 Comments

  1. August - November 13, 2013

    I am going to try this.

    Thanks for sharing.

Leave a reply

0
Connecting
Please wait...
Send a message

Sorry, we aren't online at the moment. Leave a message.

Your name
* Email
* Describe your issue
    Chat now

    Need more help? Save time by starting your support request online.

    Your name
    * Email
    * Describe your issue
    We're online! Ask us anything!
    Feedback

    Help us help you better! Feel free to leave us any additional feedback.

    How do you rate our support?
      Hey you!
      Want to receive our latest freebies and articles straight to your email?
      We never spam Sparky. We hate it as much as you do!