Cara Lengkap Membuat Tombol Flat 3D Dengan CSS3 Box-Shadow 2019

Selamat pagi blogger indonesia, pada kesempatan ini ingin berbagi tentang Cara Lengkap Membuat Tombol Flat dengan Style 3D menggunakan CSS Box-Shadow.

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 :

Tombol Flat 3D

#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

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

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

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

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>

Catatan: Untuk menambahkan Font Icon Awesome silahkan simpan kode dibawah ini sebelum tag </head>

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

Contoh Pemasangan :

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

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 "Cara Lengkap Membuat Tombol Flat 3D dengan CSS3 Box-Shadow" dari saya, jika ada yang ingin ditanyakan silahkan berkomentar.

Note : Jika Ingin Mencopas Artikel Ini Silahkan Download, Klik Button Download Yang Telah Disediakan.

Terima Kasih Telah Berkunjung.

#SemogaBermanfaat
#SalamNewbieBlogger