Warna Warni Button Gradient CSS3

Menambahkan postingan yang kemarin mengenai Membuat tombol Dengan CSS3 yang kebetulan ada rekan blogger BelajarCORELDRAW yang meminta beberapa source kode untuk button CSS3 yang lebih berpariasi dengan penggunaan warna yang berbeda, Karena memang kemarin saya hanya membuat satu sample button CSS3 dengan warna gradasi putih.

Untuk sekarang saya mencoba memberikan source kode button Gradient CSS3 yang sedikit warna warni, Untuk contoh bisa lihat screen shoot gambar dibawah ini.


Untuk source kodenya bisa diambil dibawah ini sesuai dengan warna button CSS3 yang diinginkan.

Source kode Black Button :
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');}

.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}

.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

Source kode White Button :

.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');}

.white:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');}

.white:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');}

Source kode Orange Button

.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Source kode Red Buttom

.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

Source kode Blue Button

.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

Source kode Green Buttom

.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

16 Comment

pertamax g yah, kalau aq suka yg hitam sama black sob
Reply Delete
Rizky2009 :: Petamax diamankan UM Rizky..hehehe.
Kalau yg black kayanya cocok sama template UM Rizky yang black dop full CSS3...!!!
Reply Delete
jadi bingung mau yang mana..hahahahaa..tapi yg awal juga dah bagus kok brad......
Reply Delete
Belantara Indonesia :: Seperti itulah Brader kalau banyak pilihan biasanya bingung....hehehee..!!! Pilih yang pasti sajah.
Reply Delete
ikutan dunk buat pasang :)
Reply Delete
masuk weblog ini, kayak masuk taman bermain, banyak warna bagus dan serasi sama warna dasar.....ga percuma utak atiknya sampe teler....yg pasti bikin krasan..cuman kurang kedai minuman aja brad....he he he..
Reply Delete
CSS3 emang mantep nih, bisa jadi pengganti gambar..
thx udh share sob n tetap semangat
maaf baru bisa berkunjung lagi
Reply Delete
Kalo aq suka yg merah sob.Thanks ya dah di share,jd nambah wawasan ku
Reply Delete
Aku sih tetep Hejo lah.. cuma sayang aku anti sama Hejo muda.. jadi ntar ke source-nya aja deh nentuin warna sendiri hhe...

thnx 4 share Sob... Happy blogging :P
Reply Delete
mampir lagi di sini......lama ga berkunjung....banyak warna warni indah di sini
Reply Delete
kalo saya sih suka yg simple2 ajha sob, dulu jg pengen mempelajari CSS, tapi dah berhenti, hehe. terima kasih informasinya..
Reply Delete
Lagi musim tutoriaL CSS3 yah, saya beLum mudeng Mas. htmL aja beLum LuLus2, hahaha...
Reply Delete
yang warna putih juga bagus...

Bolehngeblog
Reply Delete
maaf telat kunjungan sob,konrksi di rumah lagi lola.
thank's ilmunya.langsung diuji coba..
Reply Delete
makasih informasinya,,,,
Reply Delete
mantap,,,saya suka warna hijau..:)
Reply Delete

Poskan Komentar

Cancel Reply