Sedikit Info Seputar
Basic Pembuatan Tombol Flat 3D dengan CSS3 Box-Shadow
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Basic Pembuatan Tombol Flat 3D dengan CSS3 Box-Shadow, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Basic,
Artikel CSS,
Artikel HTML, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Basic Pembuatan Tombol Flat 3D dengan CSS3 Box-Shadow
Terbaru
link: Basic Pembuatan Tombol Flat 3D dengan CSS3 Box-Shadow
Berbagi Basic Pembuatan Tombol Flat 3D dengan CSS3 Box-Shadow Terbaru dan Terlengkap 2017
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! :)