Making Basic Button Flat 3D with CSS3 Box-Shadow

In this tutorial I will describe in detail, from creating a button, change the color hover, creating the effect of a real click when the button is clicked, add font-awesome icon on the button, and change the color of the button
Author: Rian N Herdian
Here is a key demonstration of what I mean:
Tombol Flat 3D

HTML Code:

<a class="tombolflat3d" href="#link">Tombol Flat 3D</a>

CSS code:

<style>
.tombolflat3d {
border-radius:4px;
display:inline-block;
margin:5px;
padding:10px 15px;
font-size:20px;
background:#4689F7;
color:#fff!important;
text-shadow:0 -2px 0 rgba(0,0,0,0.14);
box-shadow:inset 0 -4px 0 rgba(0,0,0,0.14);
}
.tombolflat3d:hover {
background:#3f83f3;
color:#fff;
box-shadow:inset 0 -3px 0 rgba(0,0,0,0.14);
}
.tombolflat3d:active {
box-shadow:inset 0 -1px 0 rgba(0,0,0,0.14);
}
</style>

Adding color to the Button Class Flat 3D

Tombol Flat 3D (default) Tombol Flat 3D (green) Tombol Flat 3D (red)

HTML Code:

<a class="tombolflat3d" href="#link">Tombol Flat 3D (default)</a>
<a class="tombolflat3d green" href="#link">Tombol Flat 3D (green)</a>
<a class="tombolflat3d red" href="#link">Tombol Flat 3D (red)</a>

CSS Code:

<style>
/* -- Pengaturan Warna -- */
.tombolflat3d.green {
background:#51d14b;
}
.tombolflat3d.green:hover {
background:#4ccc46;
}
.tombolflat3d.red {
background:#db4141;
}
.tombolflat3d.red:hover {
background:#d33939;
}</style>

Adding Class Size on 3D Flat Button

Tombol Flat 3D (small) Tombol Flat 3D Tombol Flat 3D (large)

HTML Code:

<a class="tombolflat3d small" href="#link">Tombol Flat 3D (small)</a>
<a class="tombolflat3d" href="#link"></i> Tombol Flat 3D</a>
<a class="tombolflat3d large" href="#link">Tombol Flat 3D (large)</a>

CSS Code:

<style>
/* -- Pengaturan Ukuran -- */
.tombolflat3d.small {
    padding:8px 10px;
    font-size:80%;
}
.tombolflat3d.large {
padding:20px 30px;
font-size:130%;
}
</style>

Note: To add an Icon Font Awesome please keep the following code before the </ head>
Tombol Flat 3D (green) Tombol Flat 3D (red)
HTML Code:

<a class="tombolflat3d green" href="#link"><i class='fa fa-download'></i> Tombol Flat 3D (green)</a>
<a class="tombolflat3d red" href="#link"><i class='fa fa-remove'></i> Tombol Flat 3D (red)</a>

A few posts about "Making Basic Button with CSS3 3D Flat-Shadow Box" from me, if anyone wants to ask please comment.