Basic Pembuatan Tombol Flat 3D dengan CSS3 Box-Shadow

Selamat pagi blogger indonesia, pada kesempatan ini Kang Rian ingin berbagi tentang Cara Pembuatan Tombol Flat dengan Style 3D menggunakan CSS Box-Shadow (Inset).

Tutorial kali ini saya akan menjelaskan secara detail, mulai dari membuat tombol, merubah warna hover, membuat efek klik sungguhan ketika tombol di klik, menambahkan icon font-awesome pada tombol, dan merubah warna tombol.

Berikut adalah demonstrasi tombol yang saya maksud :


Kode HTML :

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

Kode CSS :

<style>
.tombolflat3d {
border-radius:4px;
display:inline-block;
margin:5px;
padding:10px 15px;
font-size:20px;
background:#4689F7;
color:#fff;
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>

Menambahkan Class Warna pada Tombol Flat 3D

Kode HTML :

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

Tambahan CSS :

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

Menambahkan Class Ukuran pada Tombol Flat 3D

Kode HTML :

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

Tambahan CSS :

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

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Contoh Pemasangan :


Kode HTML :

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

Sekian postingan tentang "Basic Pembuatan Tombol Flat 3D dengan CSS3 Box-Shadow" dari saya, jika ada yang ingin ditanyakan silahkan berkomentar.

Semoga bermanfaat! :)