Juni 09, 2012

Macam Aneka Warna Tombol (button) Demo Download Dengan Css

Situseo Blog : Penggunaan tombol demo atapun download dengan menggunakan css warna gradient atau menggunakan gambar/image sebagai bentuk tampilan tombol tentu tidak menjadi persoalan, itu tergantung kita meramu dan menyesuaikan bentuk dan warna yang sesuai dengan latar (background), penggunaan script css untuk membuat tombol/button pada blog akan mempermudah pemilik blog untuk memodifikasi, baik bentuk, ukuran dan warna, mungkin itu salah satu kelebihan dari script menggunakan css.

Dibawah ini ada beberapa macam warna dari tombol yang bisa kalian pergunakan untuk tombol demo atau pun tombol dowload pada blog kalian, tentunya dengan pilihan warna yang ada bisa menyesuaikan dengan latar atau background template kalian (kalau ada yang cocok). Seperti pada postingan sebelumnya mengenai modifikasi tampilan spoiler, pada post tersebut tampilan button spoiler saya modifikasi dengan menggunakan css tombol begitu juga untuk memodifikasi textarea, jika kalian ingin memodifikasi spoiler atau textarea yang kalian pergunakan, kalian bisa menggunakan tombol ini sebagai pengganti tombol spoiler default.

Button Css

Seperti apa bentuk dan warna tombol demo atau tombol download yang saya share ini, kalian bisa melihatnya dengan meng-klik link demo dibawah ini.


Ada yang terpilih? jika ya, kalian bisa menggunakan script css dan html dibawah ini untuk diterapkan pada blog kalian.

Html

<a href="#" class="tombol">Keterangan</a>

Untuk HTML perhatikan nama selector-nya, dalam contoh menggunakan class="tombol" kalian sesuaikan namanya dengan nama selector yang dipilih, sebagai contoh class="tombol5"

Css Button 1

.tombol1 {
color:#787878;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #dcdcdc;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff; 
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
}
.tombol1:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.tombol1:active {
position:relative;
top:1px;
}

Css Button 2

.tombol2 {
color:#575757;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow: 0px 1px 0px #B0B0B0;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #8c8a8c;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #c9c9c9;
-moz-box-shadow:inset 0px 1px 0px 0px #c9c9c9;
box-shadow:inset 0px 1px 0px 0px #c9c9c9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9c9c9c), color-stop(1, #787678) );
background:-moz-linear-gradient( center top, #9c9c9c 5%, #787678 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9c9c9c', endColorstr='#787678');
background-color:#9c9c9c;
}
.tombol2:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #787678), color-stop(1, #9c9c9c) );
background:-moz-linear-gradient( center top, #787678 5%, #9c9c9c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#787678', endColorstr='#9c9c9c');
background-color:#787678;
}
.tombol2:active {
position:relative;
top:1px;
}

Css Button 3

.tombol3 {
color:#a8a8a8;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #000000;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #8a8a8a;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #aba9ab;
-moz-box-shadow:inset 0px 1px 0px 0px #aba9ab;
box-shadow:inset 0px 1px 0px 0px #aba9ab;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7a7a7a), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #7a7a7a 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a7a7a', endColorstr='#000000');
background-color:#7a7a7a;
}
.tombol3:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #7a7a7a) );
background:-moz-linear-gradient( center top, #000000 5%, #7a7a7a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#7a7a7a');
background-color:#000000;
}
.tombol3:active {
position:relative;
top:1px;
}

Css Button 4

.tombol4 {
color:#b58a0b;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #f2cc59;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #fffcbd;
-moz-box-shadow:inset 0px 1px 0px 0px #fffcbd;
box-shadow:inset 0px 1px 0px 0px #fffcbd;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #f2cc59) );
background:-moz-linear-gradient( center top, #ffec64 5%, #f2cc59 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#f2cc59');
background-color:#ffec64;
}
.tombol4:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2cc59), color-stop(1, #ffec64) );
background:-moz-linear-gradient( center top, #f2cc59 5%, #ffec64 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2cc59', endColorstr='#ffec64');
background-color:#f2cc59;
}
.tombol4:active {
position:relative;
top:1px;
}

Css Button 5

.tombol5 {
color:#b04600;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #dbb172;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #eeb44f;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #fceaca;
-moz-box-shadow:inset 0px 1px 0px 0px #fceaca;
box-shadow:inset 0px 1px 0px 0px #fceaca;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1ad0e), color-stop(1, #db7c15) );
background:-moz-linear-gradient( center top, #f1ad0e 5%, #db7c15 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1ad0e', endColorstr='#db7c15');
background-color:#f1ad0e;
}
.tombol5:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db7c15), color-stop(1, #f1ad0e) );
background:-moz-linear-gradient( center top, #db7c15 5%, #f1ad0e 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#db7c15', endColorstr='#f1ad0e');
background-color:#db7c15;
}
.tombol5:active {
position:relative;
top:1px;
}

Css Button 6

.tombol6 {
color:#ffc2c2;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #9e0b00;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #d02718;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #faa199;
-moz-box-shadow:inset 0px 1px 0px 0px #faa199;
box-shadow:inset 0px 1px 0px 0px #faa199;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f) );
background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
background-color:#f24537;
}
.tombol6:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537) );
background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
background-color:#c62d1f;
}
.tombol6:active {
position:relative;
top:1px;
}

Css Button 7

.tombol7 {
color:#0f7d1c;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #7fc70c;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #74b807;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
box-shadow:inset 0px 1px 0px 0px #a4e271;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
background-color:#89c403;
}
.tombol7:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
background-color:#77a809;
}
.tombol7:active {
position:relative;
top:1px;
}

Css Button 8

.tombol8 {
color:#11488f;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #7cacde;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #2893d6;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #73b4dd), color-stop(1, #468ccf) );
background:-moz-linear-gradient( center top, #73b4dd 5%, #468ccf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#73b4dd', endColorstr='#468ccf');
background-color:#73b4dd; 
}
.tombol8:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #73b4dd) );
background:-moz-linear-gradient( center top, #468ccf 5%, #73b4dd 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#73b4dd');
background-color:#468ccf;
}
.tombol8:active {
position:relative;
top:1px;
}

Css Button 9

.tombol9 {
color:#c9c9c9;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #660c78;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #a511c0;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #e184f3;
-moz-box-shadow:inset 0px 1px 0px 0px #e184f3;
box-shadow:inset 0px 1px 0px 0px #e184f3;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a780b3), color-stop(1, #87469c) );
background:-moz-linear-gradient( center top, #a780b3 5%, #87469c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a780b3', endColorstr='#87469c');
background-color:#a780b3;
}
.tombol9:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #87469c), color-stop(1, #a780b3) );
background:-moz-linear-gradient( center top, #87469c 5%, #a780b3 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#87469c', endColorstr='#a780b3');
background-color:#87469c;
}
.tombol9:active {
position:relative;
top:1px;
}

Semoga macam aneka warna tombol tesebut bisa berguna untuk tampilan blog kalian.

Semoga bermanfaat,

7 Diskusi untuk Macam Aneka Warna Tombol (button) Demo Download Dengan Css

10 Juni 2012 14.40  

tombolnya bagus ..
saya pake buat label topik bisa lihat di

http://dyan-seller.blogspot.com

TY

Wah ini yang ane cari sejak lama, makasih dalang :D

11 Juni 2012 05.43  

@Raden Chopin sama-sama semoga bermanfaat

19 Juni 2012 12.39  

Wah template anda penuh dengan jQuery ya,,,,, bagus banget mas....? :D

20 Juni 2012 13.47  

bagus, keren, simple gan.
izin terapkan dan edit-edit dulu ya...hehe

20 Agustus 2012 11.32  

Wah Tombolnya Keren..
Makasih ya Mas Dalang....

2 Oktober 2012 02.28  

bagus bagus sob tombolnya,,,
ijin make di blog ane ya sob,,,
maturnuwun...

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top