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.

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

Demo Tombol Aneka Warna

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,