Kali ini kenny akan bermain lagi dengan CSS yaitu kita akan membuat button switch 3D.
CSS merupakan sebuah kode untuk mempercantik suatu tampilan HTML. Dengan CSS kita dapat merubah berbagai gaya tampilan HTML.
Baca Juga: Button Pure CSS Hover Keren
Sekarang kita akan membuat sebuah tombol animasi switch dengan tampilan 3D hanya menggunakan CSS3 dan HTML sebagai dasarnya.
Source code tombol 3d bisa kalian copy dan paste di bawah sini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Switch 3d Code</title>
<style type="text/css">
.switch-ken.ken-switch {width: 50px; height: 100px;}
.switch-ken.ken-switch label {background: #cbc7bc; margin: 0 auto; border-radius: 5px; box-shadow: inset 0 1px 0 white, 0 0 0 1px #999, 0 0 5px 1px rgba(0,0,0,0.2), 0 2px 0 rgba(255,255,255,0.6), inset 0 10px 1px #e5e5e5, inset 0 11px 0 rgba(255,255,255,0.5), inset 0 -45px 3px #ddd; }
.switch-ken.ken-switch label:after {content: ""; position: absolute;top: -20px; left: -25px; bottom: -20px; right: -25px; background: #ccc; background: -moz-linear-gradient(#ddd, #bbb); background: -ms-linear-gradient(#ddd, #bbb); background: -o-linear-gradient(#ddd, #bbb); background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#bbb)); background: -webkit-linear-gradient(#ddd, #bbb); background: linear-gradient(#ddd, #bbb); z-index: -1; border-radius: 5px; border: 1px solid #bbb; box-shadow: 0 0 5px 1px rgba(0,0,0,0.15), 0 3px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5); }
.switch-ken.ken-switch label:before {content: ""; position: absolute; width: 8px; height: 8px; background: #666; top: -13px; left: 20px; border-radius: 50%; box-shadow: 0 120px 0 #666, 0 1px 0 white, 0 121px 0 white; }
.switch-ken.ken-switch input:checked ~ label {background: #d2cbc3; box-shadow: inset 0 1px 0 white, 0 0 0 1px #999, 0 0 5px 1px rgba(0,0,0,0.2), inset 0 -10px 0 #aaa, 0 2px 0 rgba(255,255,255,0.1), inset 0 45px 3px #e0e0E0, 0 8px 6px rgba(0,0,0,0.18); }
.switch-ken { margin: 50px auto; position: relative; }
.switch-ken label { width: 100%; height: 100%; position: relative; display: block; }
.switch-ken input { top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 100; position: absolute; width: 100%; height: 100%; cursor: pointer; }
</style>
</head>
<body>
<div class="switch-ken ken-switch">
<input type="checkbox">
<label></label>
</div>
<div class="switch-ken ken-switch">
<input type="checkbox" checked>
<label></label>
</div>
</body>
</html>
Done.
Begitulah cara mudah membuat tombol dengan CSS3
Terima kasih telah berkunjung.
Demo