Cara Membuat Tombol dengan Css

Trik!

Tombol Css dengan Eefek Shadow atau Bayangan ini Sangat Mudah untuk Anda Pelajari, Maka dari itu silahkan Baca Lebih lanjut...

IlmuKomputer95.co.cc- Bismillah"

Kali ini saya akan sedikit Berbagi Trik membuat Tombol dengan Css Efek Shadow yang Sangat Elegant.

Pertama-tama Silahkan Buka Akun Blogspot anda.

Masuk ke Edit HTML.

dan Cari Code ]]></b:skin>

Setelah ketemu, Silahkan Copy code dibawah ini dan Paste tepat diatasnya.

".box-css3-tombol-download{ padding: 10px 0; } .css3-tombol-download{ margin:0 auto; text-decoration:none; width:140px; text-align:left; height:38px; display:block; overflow:hidden; font:normal normal 20px/14px Arial, Helvetica; color:#fefefe; cursor:pointer; text-shadow:0 1px 0 rgb(129, 56, 149); border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; box-shadow: inset 1px 1px 0px rgb(165, 61, 191), inset -1px -1px 0px rgb(165, 61, 191); -webkit-box-shadow:none!important /* inset 1px 1px 0px rgb(165, 61, 191), inset -1px -1px 0px rgb(165, 61, 191) */; -moz-box-shadow: inset 1px 1px 0px rgb(165, 61, 191), inset -1px -1px 0px rgb(165, 61, 191); background:#C65AE3; background:-moz-linear-gradient(top, rgb(213, 118, 237) 0%, rgb(168, 60, 197) 100%); background:-o-linear-gradient(top, rgb(213, 118, 237) 0%, rgb(168, 60, 197) 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0%, rgb(213, 118, 237)), color-stop(100%, rgb(168, 60, 197))); } .css3-tombol-download:hover{ text-shadow:0 1px 0 rgb(43, 42, 126); box-shadow: inset 1px 1px 0px rgb(71, 71, 208), inset -1px -1px 0px rgb(71, 71, 208); -webkit-box-shadow:none!important /* inset 1px 1px 0px rgb(71, 71, 208), inset -1px -1px 0px rgb(71, 71, 208) */; -moz-box-shadow: inset 1px 1px 0px rgb(71, 71, 208), inset -1px -1px 0px rgb(71, 71, 208); background:#4E4DD7; background:-moz-linear-gradient(top, rgb(117, 117, 239) 0%, rgb(60, 59, 196) 100%); background:-o-linear-gradient(top, rgb(117, 117, 239) 0%, rgb(60, 59, 196) 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0%, rgb(117, 117, 239)), color-stop(100%, rgb(60, 59, 196))); } .css3-tombol-download:before{ position:relative; content:''; display:block; top:2px; margin:0 auto; width:98%; padding:18px 0; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; background:rgb(168, 60, 197); background:-moz-linear-gradient(top, rgb(206, 98, 235) 0%, rgb(168, 60, 197) 100%); background:-o-linear-gradient(top, rgb(206, 98, 235) 0%, rgb(168, 60, 197) 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0%, rgb(206, 98, 235)), color-stop(100%, rgb(168, 60, 197))); } .css3-tombol-download:hover:before{ background:rgb(60, 59, 196); background:-moz-linear-gradient(top, rgb(97, 98, 233) 0%, rgb(60, 59, 196) 100%); background:-o-linear-gradient(top, rgb(97, 98, 233) 0%, rgb(60, 59, 196) 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0%, rgb(97, 98, 233)), color-stop(100%, rgb(60, 59, 196))); } .css3-tombol-download:after{ position:relative; float:right; content:''; display:block; top:-50px; width:36px; padding:19px 0; height:40px; border-radius:0 4px 4px 0; -webkit-border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0; background:rgba(72, 30, 178, 0.4); } .css3-tombol-download:hover:after{ background:rgba(91, 158, 228, 0.4); } .css3-tombol-download span{ position:relative; color:#fefefe; content:''; display:block; top:-24px; margin:0 auto; z-index:4; padding:0 0 0 7px; text-transform:capitalize; } .css3-tombol-download span:before{ position:relative; float:right; content:''; display:block; top:-6px; right:12px; width:12px; height:12px; background:rgb(225, 225, 225); border-radius:1px 1px 0 0; -webkit-border-radius:1px 1px 0 0; -moz-border-radius:1px 1px 0 0; } .css3-tombol-download span:after{ position:relative; float:right; content:''; top:6px; right:-5px; border-style:solid; border-width:14px 11px 0 11px; border-color:transparent; border-top-color:rgb(225, 225, 225); } /*************************************/ .css3-tombol-download-sprite{ overflow:hidden; display:block; margin:0 auto; text-decoration:none; padding:19px 0 17px 0; text-align:center; color:rgba(220, 228, 235, 0.9); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 2px 1px rgba(0, 0, 0, 0.7); text-transform:uppercase; font:normal bold 18px/17px Helvetica, Arial; max-width:160px; display:block; background:#273648; background:-moz-linear-gradient(top, rgb(55, 69, 83) 0%, rgb(38, 53, 70) 50%, rgb(23, 34, 45) 100%); background:-o-linear-gradient(top, rgb(55, 69, 83) 0%, rgb(38, 53, 70) 50%, rgb(23, 34, 45) 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0%, rgb(55, 69, 83)), color-stop(50%, rgb(38, 53, 70)), color-stop(100%, rgb(23, 34, 45))); -webkit-border-radius:55px; -moz-border-radius:55px; border-radius:55px; box-shadow: 0 -1px 1px rgba(18, 27, 37, 0.4), 0 1px 0 rgb(18, 27, 37), 0 2px 0 rgb(18, 27, 37), 0 3px 0 rgb(18, 27, 37), 0 4px 0 rgb(18, 27, 37), 0 5px 0 rgb(18, 27, 37), 0 6px 0 rgb(18, 27, 37), 0 6px 2px rgb(18, 27, 37), 0 6px 8px rgb(18, 27, 37); -moz-box-shadow: 0 -1px 1px rgba(18, 27, 37, 0.4), 0 1px 0 rgb(18, 27, 37), 0 2px 0 rgb(18, 27, 37), 0 3px 0 rgb(18, 27, 37), 0 4px 0 rgb(18, 27, 37), 0 5px 0 rgb(18, 27, 37), 0 6px 0 rgb(18, 27, 37), 0 6px 2px rgb(18, 27, 37), 0 6px 8px rgb(18, 27, 37); -webkit-box-shadow: 0 -1px 1px rgba(18, 27, 37, 0.4), 0 1px 0 rgb(18, 27, 37), 0 2px 0 rgb(18, 27, 37), 0 3px 0 rgb(18, 27, 37), 0 4px 0 rgb(18, 27, 37), 0 5px 0 rgb(18, 27, 37), 0 6px 0 rgb(18, 27, 37), 0 6px 2px rgb(18, 27, 37), 0 6px 8px rgb(18, 27, 37); } .css3-tombol-download-sprite:before, .css3-tombol-download-sprite:after{ position:relative; float:left; content:''; width:110px; height:1px; } .css3-tombol-download-sprite:before{ left:24px; top:-19px; background:#656E79; background: -moz-linear-gradient(left, transparent 0%, rgba(155, 158, 163, 0.5) 30%, rgba(155, 158, 163, 0.5) 70%, transparent 100%); background: -o-linear-gradient(left, transparent 0%, rgba(155, 158, 163, 0.5) 30%, rgba(155, 158, 163, 0.5) 70%, transparent 100%); background:-webkit-gradient( linear, left bottom, right bottom, color-stop(0%, transparent), color-stop(30%, rgba(155, 158, 163, 0.5)), color-stop(70%, rgba(155, 158, 163, 0.5)), color-stop(100%, transparent)); box-shadow:0 1px 10px rgb(155, 158, 163); -moz-box-shadow:0 1px 10px rgb(155, 158, 163); -webkit-box-shadow:none!important/* 0 1px 10px rgb(155, 158, 163) */; } .css3-tombol-download-sprite:after{ left:24px; top:17px; background:#585859; background: -moz-linear-gradient(left, transparent 0%, rgba(44, 53, 64, 0.2) 40%, rgba(44, 53, 64, 0.2) 60%, transparent 100%); background: -o-linear-gradient(left, transparent 0%, rgba(44, 53, 64, 0.2) 40%, rgba(44, 53, 64, 0.2) 60%, transparent 100%); background:-webkit-gradient( linear, left bottom, right bottom, color-stop(0%, transparent), color-stop(40%, rgba(44, 53, 64, 0.8)), color-stop(60%, rgba(44, 53, 64, 0.8)), color-stop(100%, transparent)); } .css3-tombol-download-sprite:hover{ outline:none; color:rgba(220, 228, 235, 0.8); background:#162230; background: -moz-linear-gradient(top, rgb(50, 61, 73) 0%, rgb(24, 36, 50) 50%, rgb(18, 31, 44) 100%); background: -o-linear-gradient(top, rgb(50, 61, 73) 0%, rgb(24, 36, 50) 50%, rgb(18, 31, 44) 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0%, rgb(50, 61, 73)), color-stop(50%, rgb(24, 36, 50)), color-stop(100%, rgb(18, 31, 44))); } .css3-tombol-download-sprite:hover:after{ background: -moz-linear-gradient(left, transparent 0%, rgba(44, 53, 64, 0.2) 20%, rgba(44, 53, 64, 0.5) 50%, rgba(44, 53, 64, 0.2) 80%, transparent 100%); background: -o-linear-gradient(left, transparent 0%, rgba(44, 53, 64, 0.2) 20%, rgba(44, 53, 64, 0.5) 50%, rgba(44, 53, 64, 0.2) 80%, transparent 100%); background:-webkit-gradient( linear, left bottom, right bottom, color-stop(0%, transparent), color-stop(20%, rgba(44, 53, 64, 0.7)), color-stop(50%, rgba(44, 53, 64, 1)), color-stop(80%, rgba(44, 53, 64, 0.7)), color-stop(100%, transparent)); } .css3-tombol-download-sprite:focus, .css3-tombol-download-sprite:active{ outline:none; position:relative; top:2px; background:#243547; background: -moz-linear-gradient(top, rgb(40, 51, 65) 0%, rgb(24, 36, 50) 50%, rgb(19, 31, 44) 100%); background: -o-linear-gradient(top, rgb(40, 51, 65) 0%, rgb(24, 36, 50) 50%, rgb(19, 31, 44) 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0%, rgb(40, 51, 65)), color-stop(50%, rgb(24, 36, 50)), color-stop(100%, rgb(19, 31, 44))); box-shadow: 0 -1px 1px rgba(18, 27, 37, 0.4), 0 1px 0 rgb(18, 27, 37), 0 2px 0 rgb(18, 27, 37), 0 3px 0 rgb(18, 27, 37), 0 4px 2px rgb(18, 27, 37), 0 4px 8px rgb(18, 27, 37); -webkit-box-shadow: 0 -1px 1px rgba(18, 27, 37, 0.4), 0 1px 0 rgb(18, 27, 37), 0 2px 0 rgb(18, 27, 37), 0 3px 0 rgb(18, 27, 37), 0 4px 2px rgb(18, 27, 37), 0 4px 8px rgb(18, 27, 37); -moz-box-shadow: 0 -1px 1px rgba(18, 27, 37, 0.4), 0 1px 0 rgb(18, 27, 37), 0 2px 0 rgb(18, 27, 37), 0 3px 0 rgb(18, 27, 37), 0 4px 2px rgb(18, 27, 37), 0 4px 8px rgb(18, 27, 37); } .css3-tombol-download-sprite:focus:before, .css3-tombol-download-sprite:active:before{ top:-19px; background: -moz-linear-gradient(left, transparent 0%, rgba(155, 158, 163, 0.2) 30%, rgba(155, 158, 163, 0.2) 70%, transparent 100%); background: -o-linear-gradient(left, transparent 0%, rgba(155, 158, 163, 0.2) 30%, rgba(155, 158, 163, 0.2) 70%, transparent 100%); background:-webkit-gradient( linear, left bottom, right bottom, color-stop(0%, transparent), color-stop(30%, rgba(155, 158, 163, 0.6)), color-stop(70%, rgba(155, 158, 163, 0.6)), color-stop(100%, transparent)); } .css3-tombol-download-sprite:focus:after, .css3-tombol-download-sprite:active:after{ background: -moz-linear-gradient(left, transparent 0%, rgba(44, 53, 64, 0.1) 20%, rgba(44, 53, 64, 0.3) 50%, rgba(44, 53, 64, 0.1) 80%, transparent 100%); background: -o-linear-gradient(left, transparent 0%, rgba(44, 53, 64, 0.1) 20%, rgba(44, 53, 64, 0.3) 50%, rgba(44, 53, 64, 0.1) 80%, transparent 100%); background:-webkit-gradient( linear, left bottom, right bottom, color-stop(0%, transparent), color-stop(20%, rgba(44, 53, 64, 0.5)), color-stop(50%, rgba(44, 53, 64, 0.8)), color-stop(80%, rgba(44, 53, 64, 0.5)), color-stop(100%, transparent)); } "

Kemudian Simpan Template anda.

Sekarang Masukkan Code dibawah ini Setiap anda ingin Membuat Tombol Download atau Demo. dll

<a href='http://ALAMAT BLOG ANDA' class='css3-tombol-download-sprite'>JUDUL TOMBOL</a>

Contoh :

<a href='http://www.ilmukomputer95.co.cc' class='css3-tombol-download-sprite'>Download Now</a>

Demikian semoga bermanfaat...

Selamat Mncoba.

Sumber : IlmuKomputer95.co.cc

Cara membuat Tombol Download
Cara Membuat Button
Cara membuat Tombol klik disini

Diposting oleh Tabugan Keluarga Sawah on Selasa, 10 Juli 2012

categories: Ilmu Blogger

Cara Membuat Tombol dengan Css

0 komentar

Posting Komentar

Silahkan Pilih Jenis Artikel

Blog Archive

Ikuti Kami Juga Disini!

Informasi Situs