السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
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
artikel yang bermanfaat, makasih sob
ReplyBelajar pelan2 dulu lah :D... Biar meresap ke otak saya, hehehehehe
Replybermanfaat lo gan ..
ReplyBoleh berguru gak? Edit Edit gitu ?? :D
sukses terus gan..
ReplyWah makasih gan tutorialny,, patut dicoba nih sambil belajar hehe :D
Replysipp gan warna flat
Replyini yg saya cari" buat button di projek saya. mksh gan
Replymantap nih untuk di pasang di blog ane... thanks gan
Replymaksi tutornya
Replyini ni dari kemarin ane cari.
Replymantafgan ijin borkmark ya?
ini ni dari kemarin ane cari.
Replymantafgan ijin borkmark ya?
nice gan patut dicoba
ReplyThanks bro imfonya
Replyijin praktek gan :)
Replyini dia yang saya cari2,, :)
Replylumayan sebagai button download diblog saya..
makasih buat info nya gan,,
sarannya sih, usahakan sll ada demonya gan,, eheh :D
udah saya coba diblog saya bang, ehh berhasil. makasih ya
Replywah ini yang saya cari terimakasih looh infonya
ReplySalam Mas Semut
Terima kasih gan untuk infonya
Replythanks info ny gan.... ijin pratek...
Replykeren banget
Replymantap...,,ijin sedot...
ReplyNice gan :D ane juga kebetulan pengen blajar css + bootstrap
Replywah, artikel yang sangat bagus :D , gan, hehe kalo boleh request, di tambah artikel tentang SEO gan. biar ane sering bolak balik kesini belajar seo :D
Replynice info gan:D
Reply