السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
apa kabar semua ? ^_^
masih semangat kan belajar codingnya ? :D
Tutorial kali ini saya akan memberikan tutorial Cara Membuat 3D Button Dengan CSS
yang di maksud dengan 3d button adalah sebuah tombol yang berbentuk 3d yang di buat dengan css
dari pada penasaran, mending langsung saja kita buat .
silahkan ikuti langkah-langkah di bawah ini dengan benar.
1. Membuat File HTML
seperti biasa, siapkan file bernama index.html lalu ketikkan script berikut :
<!DOCTYPE html>
<html>
<head>
<title>3D BUTTON</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="#" class="button">KLIK</a>
</body>
</html> jika file html anda buat coba anda jalankan di brower anda,
ya benar hasilnya cuma tulisan klik, itu kaarena kita belum membuat script cssnya yang berguna untuk mempercantik button tersebut
lanjut ke langkah berikutnya .
2. Membuat File CSS
file css disini saya beri nama style.css script css disini berguna untuk memberi tampilan button yang menyerupai 3D , silahkan ketik script berikut. :
html, body {
width: 100%;
height: 100%;
}
body {
font-family: sans-serif;
background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/retina_wood.png);
}
.button {
display: block;
font-size: 22px;
text-align: center;
line-height: 44px;
text-decoration: none;
color: white;
background-color: #CC4331;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
width: 124px;
height: 44px;
margin-top: -22px;
margin-left: -62px;
text-shadow: 0 -1px -1px #af3a2a;
-moz-box-shadow: 0 4px 0 #af3a2a, 0 5px 5px 1px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 0 #af3a2a, 0 5px 5px 1px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 0 #af3a2a, 0 5px 5px 1px rgba(0, 0, 0, 0.4);
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.button:hover {
background-color: #d25544;
text-shadow: 0 -1px -1px #c4402f;
-moz-box-shadow: 0 4px 0 #c4402f, 0 5px 5px 1px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 0 #c4402f, 0 5px 5px 1px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 0 #c4402f, 0 5px 5px 1px rgba(0, 0, 0, 0.4);
}
.button:active {
margin-top: -18px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
Nah itu dia Cara Membuat 3D Button Dengan CSS mudah bukan ? :D
Mohon maaf jika tidak ada demonya :D
Silahkan anda coba dan anda kembangkan sendiri .
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D
0 komentar:
Posting Komentar