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 komentar:

  1. pertamax g yah, kalau aq suka yg hitam sama black sob

    BalasHapus
  2. Rizky2009 :: Petamax diamankan UM Rizky..hehehe.
    Kalau yg black kayanya cocok sama template UM Rizky yang black dop full CSS3...!!!

    BalasHapus
  3. jadi bingung mau yang mana..hahahahaa..tapi yg awal juga dah bagus kok brad......

    BalasHapus
  4. Belantara Indonesia :: Seperti itulah Brader kalau banyak pilihan biasanya bingung....hehehee..!!! Pilih yang pasti sajah.

    BalasHapus
  5. 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..

    BalasHapus
  6. CSS3 emang mantep nih, bisa jadi pengganti gambar..
    thx udh share sob n tetap semangat
    maaf baru bisa berkunjung lagi

    BalasHapus
  7. Kalo aq suka yg merah sob.Thanks ya dah di share,jd nambah wawasan ku

    BalasHapus
  8. 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

    BalasHapus
  9. mampir lagi di sini......lama ga berkunjung....banyak warna warni indah di sini

    BalasHapus
  10. kalo saya sih suka yg simple2 ajha sob, dulu jg pengen mempelajari CSS, tapi dah berhenti, hehe. terima kasih informasinya..

    BalasHapus
  11. Lagi musim tutoriaL CSS3 yah, saya beLum mudeng Mas. htmL aja beLum LuLus2, hahaha...

    BalasHapus
  12. maaf telat kunjungan sob,konrksi di rumah lagi lola.
    thank's ilmunya.langsung diuji coba..

    BalasHapus