Cara Membuat Tombol 3D Pada Website
Tombol adalah salah satu jenis elemen navigasi pada halaman web yang berguna untuk memudahkan dan memberikan informasi kepada pengunjung website. Hapir setiap hari saya berselancar di dunia internet, saya banyak menjumpai desain tombol-tombol yang unik pada beberapa website, baik itu tombol yang didesain sendiri ataupun yang dari framework, Sehingga pada kesempatan kali ini Point Website akan memberikan tutorial Cara Membuat Tombol 3D Pada Website.
Bagaimana Cara Membuat Tombol 3D Pada Website
Sebelum teman-teman menulis code dibawah ini, Point Website akan memberikan sedikit pengetahuan dan penjelasan untuk tutorial ini. Cara Membuat Tombol 3D Pada Website sangat mudah, dimana cara pembuatannya sama seperti pada tombol umumnya, akan tetapi pada tutorial ini kita sedikit memanipulasi bagian html dengan menggunakan Pesudo Selector, dimana pesudo selector ini berguna untuk memanipulasi keadaan pada saat tombol yang kita buat di click, sehigga pada saat tombol di click maka tombol tersebut memiliki efek animasi. Untuk lebih jelasnya silahkan teman-teman tulis code dibawah ini dan simpan dengan nama file index.html atau dengan nama lain yang teman-teman inggikan yang penting extensinya harus html.
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #eee;
font-family: sans-serif;
}
.button {
width: 190px;
height: 67px;
margin: 200px auto;
display: block;;
position: relative;
border: 2px solid #045f35;
border-radius: 11px;
background-color: #0b7544;
}
.button .content {
display: block;
position: absolute;
bottom: 4px;
font-size: 20px;
line-height: 60px;
font-weight: 400;
background-color: #19887d;
color: white;
height: 100%;
width: 100%;
text-align: center;
text-transform: uppercase;
box-shadow: 0px 6px 0px #045f35;
border-radius: 6px;
transition: all 0.15s linear;
}
.button:active .content {
bottom: 0;
box-shadow: 0px 0px 0px #045f35;
}
</style>
</head>
<body>
<a href="#" class="button">
<span class="content">Read more</span>
</a>
</body>
</html>
jika sudah silahkan teman-teman buka file tersebut pada web browser, maka hasil nya akan seperti berikut ini.
keren nih gan, bakalan jdi menarik. izin coba nya
ReplyDeletesilahkan mas...
ReplyDeletejika ada kendala tanya saya aja mas..
sangat membantu
ReplyDelete