Home css Kumpulan Button Keren Css3

Minggu, 12 Februari 2012

Kumpulan Button Keren Css3



Alhamdulilah yah akhirnya bisa update tutorial lagi kali ini saya akan share Kumpulan Button Keren Css3 Button ini di buat dengan Css3 dan saya temukan di Css3framework dan anda gak usah pusing2 kalau ingin membuatnya karena disana sudah ada kode nya yang siap di download dan disini akan saya share lagi kodenya agar tidak hilang jika suatu saat nanti lupa, button dengan sentuhan css3 ini membuat suasana button berbeda dari biasanya, namanya jgua css3 hehehe ok dari pada bingung silahkan lihat demo nya

DEMO

Setelah melihat demo Awesome Button With Css3 sekarang mari kita terapkan di blog abang - eneng semua.

Simpan kode Di bawah ini di Atas kode ]]></b:skin>

.button {
    display: inline-block;
    height: 27px;
    border: 2px solid #333;
    outline: 0;
    margin: 4px 6px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 13px;
    line-height: 27px;
    text-shadow: 1px 1px 1px #FFF;
    text-align: center;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5);
    box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5);
    background-color: #e0e0e0;
    background-image: -webkit-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7edff), color-stop(1, #b1b1b1));
    background-image: -moz-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -o-linear-gradient(top, #f7edff, #b1b1b1);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f7edff, EndColorStr=#b1b1b1)";
    background-image: linear-gradient(top, #f7edff, #b1b1b1);
    -webkit-background-clip: padding;
    background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box
    }
.button:link, .button:visited, .button:hover {
    color: #444;
    text-decoration: none
    }
.button:hover, .button:focus {
    background-image: -webkit-linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5ff), color-stop(1, #999));
    background-image: -moz-linear-gradient(top, #f5f5ff, #999);
    background-image: -o-linear-gradient(top, #f5f5ff, #999);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5ff, EndColorStr=#999)";
    background-image: linear-gradient(top, #f5f5ff, #999);
    }
.button:active {
    position: relative;
    top: 1px;
    -webkit-box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5);
    -moz-box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5);
    box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5)
    }
.big {
    font-size: 17px;
    height: 38px;
    line-height: 38px;
    padding-left: 23px;
    padding-right: 23px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px
    }
.small {
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #333;
    padding-left: 8px;
    padding-right: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
    }
.disabled {
    border-color: #CCC;
    background: #e0e0e0;
    color: #CCC;
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70)
    }
.disabled:hover, .disabled:active, .disabled:focus {
    top: 0;
    background: #e0e0e0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
    }
.blue:link, .blue:visited, .red:link, .red:visited, .green:link, .green:visited, .orange:link, .orange:visited, .purple:link, .purple:visited, .black:link, .black:visited {
    color: #FFF;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6)
    }
.blue {
    border-color: #003b80;
    background-color: #004ca3;
    background-image: -webkit-linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #004ca3));
    background-image: -moz-linear-gradient(top, #006ce8, #004ca3);
    background-image: -o-linear-gradient(top, #006ce8, #004ca3);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#004ca3)";
    background-image: linear-gradient(top, #006ce8, #004ca3);
    }
.blue:hover, .blue:focus {
    background-color: #003b80;
    background-image: -webkit-linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #003b80));
    background-image: -moz-linear-gradient(top, #006ce8, #003b80);
    background-image: -o-linear-gradient(top, #006ce8, #003b80);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#003b80)";
    background-image: linear-gradient(top, #006ce8, #003b80);
    }
.red {
    border-color: #b50000;
    background-color: #d00000;
    background-image: -webkit-linear-gradient(top, #F33, #d00000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #d00000));
    background-image: -moz-linear-gradient(top, #F33, #d00000);
    background-image: -o-linear-gradient(top, #F33, #d00000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#d00000)";
    background-image: linear-gradient(top, #F33, #d00000);
    }
.red:hover, .red:focus {
    background-color: #b50000;
    background-image: -webkit-linear-gradient(top, #F33, #b50000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #b50000));
    background-image: -moz-linear-gradient(top, #F33, #b50000);
    background-image: -o-linear-gradient(top, #F33, #b50000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#b50000)";
    background-image: linear-gradient(top, #F33, #b50000);
    }
.green {
    border-color: #279100;
    background-color: #2ead00;
    background-image: -webkit-linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #2ead00));
    background-image: -moz-linear-gradient(top, #3fed00, #2ead00);
    background-image: -o-linear-gradient(top, #3fed00, #2ead00);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#2ead00)";
    background-image: linear-gradient(top, #3fed00, #2ead00);
    }
.green:hover, .green:focus {
    background-color: #279100;
    background-image: -webkit-linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #279100));
    background-image: -moz-linear-gradient(top, #3fed00, #279100);
    background-image: -o-linear-gradient(top, #3fed00, #279100);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#279100)";
    background-image: linear-gradient(top, #3fed00, #279100);
    }
.orange {
    border-color: #da7c0c;
    background-color: #faa51a;
    background-image: -webkit-linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #f47a20));
    background-image: -moz-linear-gradient(top, #faa51a, #f47a20);
    background-image: -o-linear-gradient(top, #faa51a, #f47a20);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#f47a20)";
    background-image: linear-gradient(top, #faa51a, #f47a20);
    }
.orange:hover, .orange:focus {
    background-color: #da7c0c;
    background-image: -webkit-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #da7c0c));
    background-image: -moz-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -o-linear-gradient(top, #faa51a, #da7c0c);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#da7c0c)";
    background-image: linear-gradient(top, #faa51a, #da7c0c);
    }
.purple {
    border-color: #609;
    background-color: #ca00d1;
    background-image: -webkit-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #aa00b0));
    background-image: -moz-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -o-linear-gradient(top, #ca00d1, #aa00b0);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#aa00b0)";
    background-image: linear-gradient(top, #ca00d1, #aa00b0);
    }
.purple:hover, .purple:focus {
    background-color: #609;
    background-image: -webkit-linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #609));
    background-image: -moz-linear-gradient(top, #ca00d1, #609);
    background-image: -o-linear-gradient(top, #ca00d1, #609);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#609)";
    background-image: linear-gradient(top, #ca00d1, #609);
    }
.black {
    border-color: #000;
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #666, #333);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #333));
    background-image: -moz-linear-gradient(top, #666, #333);
    background-image: -o-linear-gradient(top, #666, #333);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#333)";
    background-image: linear-gradient(top, #666, #333);
    }
.black:hover, .black:focus {
    background-color: #000;
    background-image: -webkit-linear-gradient(top, #666, #000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
    background-image: -moz-linear-gradient(top, #666, #000);
    background-image: -o-linear-gradient(top, #666, #000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#000)";
    background-image: linear-gradient(top, #666, #000);
    }
.arrow, .heart, .star {
    padding-left: 12px
    }
.arrow:before, .heart:before, .star:before {
    padding-right: 5px;
    vertical-align: -15%
    }
.arrow:before {
    content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4IWPw-TFJf1VlSrPYV5ILUvcKXf51sYYalrfVlx9g1swNwEHFVWPfJoO7x9aG2TfbqAgSoZGgy5LH8C6G_96-Sd890yusvqEZ0_LMEcPD7VV4796rYDK0BhHUduV190FvkqD8ZbWl3I/s1600/up+green.png)
    }
.heart:before {
    content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-mpW0EMeozXvWBy913HaZXRM8eYd2M28KuqrviRRbXctgQgDTszrIMqUAcAGC3eTYR7PS2YQNNWW35yFiXBjVffYHz1KiTQxyamoIcGOCFBKft1TOoxZHyVcdtN-IhHL2V2Z7bp7-7hQ/s1600/heart.png)
    }
.star:before {
    content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1TZpxDwim9t7BrKyGJXriQDI3ooga5D13dnZ1tmA9bVnIdQ7M31QgyvpKYJSMXoyPVgqJlfZFyv6ym_1xfdj5WUU8QgaFn_FCgw_M9rZ7h1Q4X1YApcOB1gkZAA-_x5eN3oKjYfkv8g/s1600/star.png)
    }

Kode html di bawah ini bisa anda simpan dalam Gadget Html/javascript ataupun Di postingan anda

<a href="url anda" class="button big">Button Besar</a>

keterangan button css3


Perhatikan kode big itu adalah button model besar anda bisa ganti model big dengan model di bawah ini

  1. big ( button besar )
  2. small ( button kecil )
  3. blue ( button biru )
  4. red ( button merah )
  5. green ( button hijau )
  6. orange ( button oren )
  7. purple ( button ungu )
  8. disabled ( button disable )
  9. star ( button bintang )
  10. heart ( button love )
  11. arrow ( button download )
  12. gray ( button hitam )

Nah itu Dia Style button - button css3 nya jadi silahkan pilih salah satu, atau anda ingin gunakan 2 juga bisa atau semua sekaligus juga bisa hehehehe. Good Luck

Kumpulan Button Keren Css3 Kumpulan Button Keren Css3 Sinto 5.0 stars based on 35 reviews Alhamdulilah yah akhirnya bisa update tutorial lagi kali ini saya akan share Kumpulan Button Keren Css3 Button ini di buat dengan Css3 da...

Related Posts

Next Post
Previous Post