Dalam pembuatan sebuah blog ataupun website pasti tidak akan pernah lepas dari yang namanya tombol, yang berfungsi juga sebagai penghias dari sebuah blog
Sangat banyak cara untuk membuat sebuah tombol, bisa dengan css dan tidak kalah banyak juga yang menggunakan gambar sebagai tombol, hanya saja pembuatan tombol dengan gambar akan membebani lamanya loading suatu blog.
Nah, sekarang saya akan memberi tahu cara membuat tombol 3D di blog menggunakan css
Button
Seperti tombol diatas adalah contoh dari penggunaan css untuk pembuatan tombol dan juga penambahan attribut box shadow. Ada 3 buah susunan kode css untuk pembuatan tombol seperti diatas (Default atau diam, ketika pointer menunjuk tombol, dan ketika tombol di klik)
Ketika Tombol Default
.ButtonOK {
box-shadow: 3px 4px 0px 0px #1564ad;
background:linear-gradient(to bottom, cyan 15%, blue 110%);
text-align:center;
background-color:#79bbff;
border-radius:5px;
border:1px solid #337bc4;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
font-weight:bold;
padding:12px 44px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
Pada kode diatas hanya sebagai kode untuk tombol yang terlihat mati. Agar tombol terlihat hidup kita gunakan attribut hover.
Tombol Hover
.ButtonOK:hover {Kode diatas berfungsi untuk merubah warna ketika pointer menyetuh tombol. dan untuk kode css terakhir berfungsi ketika kita klik
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
Ketika Di Klik
.ButtonOK:active {
box-shadow: 1px 1px 0px 0px #1564ad;
position:relative;
top:1px;
left:1px;
}
Di sini kita mengurangi ketinggian x dan y pada box-shadownya dan menggunakan position:relative dengan menambahkan margin atas dan kiri sebanyak 1px agar ketika tombol diaktifkan menjadi bergeser ke kanan dan ke bawah sebanyak 1px.
Untuk menggunakan kode diatas kita hanya menambahkan kode html seperti dibawah berikut
<div class="ButtonOK">Button</div>
Credit : Kompi Ajaib