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.
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,
0 komentar:
Posting Komentar