Tutor Aneka Warna Tombol (Button) Dengan CSS

Sudah 1 Bulan lamanya saya tidak ngeblogging :D. Nah Sekarang saya akan memberi tahu cara membuat tombol atau button yang warna warni dengan CSS. Tutor ini saya dapat di SituSEO. Dan Saya hanya perantara dari posting ini :). Ok Perhatikan Tutornya ya.. :D.

Jika ingin tahu bagaimana jadinya tombol tersebut, klik Demo dibawah ini :

DEMO ~ Button atau Tombol Dengan CSS

Untuk membuatnya kalian harus memilih warna apa yang kalian pilih. jika sudah terpilih warna apa yang kalian pilih, kalian harus menggunakan CSS dan HTML dibawah ini, untuk diterapkan diblog kalian.

HTML

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

NB : Untuk HTML perhatikan nama selektornya, dalam contoh mengginakan class="tombol" kalian sesuaikan dengan namanya dengan selector yang dipilih sebagai contoh class="tombol5". Kalian lihat dulu kode CSS dibawah ini, seperti CSS 1 - 9 itu dipilih salah 1 misalnya CSS 1 menjadi "tombol1" dan menjadi class="tombol1". Kalau keterangannya kalian kasih sesuai dengan kemauan kalian sendiri sebagai misalnya Keterangan menjadi Download atau sebagainya. Kalau href="#" nya yang pasti "#" tanda # dikasih link yang ingin anda Tambahkan.

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;
}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;
}

Kesimpulannya, HTML tadi itu boleh ditaruh dimana saja. Kalau CSS Buttonnya bisa ditarus di ]]></b.skin> atau ditempat CSS yang sudah disediakan langsung yaitu di Sesuaikan disebelahnya Edit HTML, klik Sesuaikan - Tingkat Lanjut - Tambahkan CSS, taruh salah satu kode CSS Button tersebut (yang anda pilih) diTambahkan CSS. Dan Soal HTMLnya lagi ni. Kode aslinya "<a href="#" class="tombol">Keterangan</a>" Pada href="#" kalian memberi link pada tanda #. Pada class="tombol" kalian memberi CSS yang kalian sudah pilih Contoh (class="tombol2") itu karena saya memilih CSS Button 2. Dan Keterangan Kalian memberi Keterangan yang kalian inginkan seperti download dan sebagainya.

Semoga dengan cara ini blog kalian semua akan lebih menarik dan berwarna warni.. Ok kalau begitu.. Semoga Bermanfaat and salam blogger.