Membuat Tombol 3D Sederhana Dengan Atribut Box Shadow
Dalam pembuatan sebuah website atau blog, niscaya tidak terlepas dari tombol-tombol untuk aneka macam fungsi dan tentunya juga sanggup menghiasi tampilan blog itu sendiri.
Banyak cara dalam menciptakan sebuah tombol, mulai dari memakai gambar hingga dengan memakai CSS. Namun semoga tidak terlalu membebani loading blog, sangat dianjurkan untuk menciptakan tombol dengan memakai CSS ketimbang dengan gambar.
Karena kini zamannya CSS3, maka dalam pembuatan elemen-elemen blog dalam hal ini menciptakan tombol atau button alangkah baiknya juga memperhatikan validasi CSS3-nya.
Nah kali ini aku akan mencoba menciptakan sebuah tombol atau button dengan CSS. Dengan memanfaatkan atribut box-shadow kita akan menciptakan tombol menjadi terlihat 3 dimensi. Ditambah dengan penambahan gradasi warna dan atribut position relative, maka tombol ini semakin terlihat dan terasa sebagai tombol 3 dimensi yang nyata. Ketika kita menekan tombol dengan klik mouse, maka kita akan mencicipi menyerupai menekan tombol yang sesungguhnya.
button
Sebagai pola yaitu tombol di atas tersebut, silahkan coba tekan tombol di atas tersebut untuk melihat efeknya. Menarik bukan?
Kita menciptakan 3 buah susunan isyarat CSS untuk menciptakan tombol menyerupai di atas yaitu tampilan dikala diam, dikala tombol dihover kursor, dan dikala ditekan atau di klik.
CSS dikala tombol diam
Perhatikan pada box-shadow di atas, terdapat pemfokusan untuk x dan y dengan tidak memperlihatkan imbas blur dan spread untuk mendapat imbas 3 dimensinya. Begitu pun dengan warna gradasi pada backgroundnya untuk lebih menghidupkan tombolnya.
CSS dikala tombol dihover atau disentuh
Di sini kita hanya membalikan warna gradasi-nya pada background-nya semoga terlihat perubahannya dikala dihover kursor.
CSS dikala tombol ditekan atau diklik
Di sini kita mengurangi ketinggian x dan y pada box-shadownya dan memakai position:relative dengan menambahkan margin atas dan kiri sebanyak 1px semoga dikala tombol diaktifkan menjadi bergeser ke kanan dan ke bawah sebanyak 1px.
Untuk memakai tombol ini kita hanya memakai penganggilnya sesuai class yang dibentuk menyerupai ini.
Bagaimana? Praktis bukan? Silahkan coba sendiri dengan merubah warna gradasinya semoga cocok dengan tema blog Anda.
Selamat mencoba...
Sumber https://www.kompiajaib.com/
Kita menciptakan 3 buah susunan isyarat CSS untuk menciptakan tombol menyerupai di atas yaitu tampilan dikala diam, dikala tombol dihover kursor, dan dikala ditekan atau di klik.
CSS dikala tombol diam
.ButtonOK { box-shadow: 3px 4px 0px 0px #1564ad;
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
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;
}Perhatikan pada box-shadow di atas, terdapat pemfokusan untuk x dan y dengan tidak memperlihatkan imbas blur dan spread untuk mendapat imbas 3 dimensinya. Begitu pun dengan warna gradasi pada backgroundnya untuk lebih menghidupkan tombolnya.
CSS dikala tombol dihover atau disentuh
.ButtonOK:hover {
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
}Di sini kita hanya membalikan warna gradasi-nya pada background-nya semoga terlihat perubahannya dikala dihover kursor.
CSS dikala tombol ditekan atau diklik
.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 memakai position:relative dengan menambahkan margin atas dan kiri sebanyak 1px semoga dikala tombol diaktifkan menjadi bergeser ke kanan dan ke bawah sebanyak 1px.
Untuk memakai tombol ini kita hanya memakai penganggilnya sesuai class yang dibentuk menyerupai ini.
<div class="ButtonOK">button</div>Bagaimana? Praktis bukan? Silahkan coba sendiri dengan merubah warna gradasinya semoga cocok dengan tema blog Anda.
Selamat mencoba...
0 Response to "Membuat Tombol 3D Sederhana Dengan Atribut Box Shadow"
Posting Komentar