cara Membuat Button Gradient dengan CSS3

cara Membuat Button Gradient dengan CSS3 – ninosaji bloggers akan berbagi cara Membuat Button Gradient dengan CSS3 . berikut pembahasan untuk cara Membuat Button Gradient dengan CSS3 . dahulu kala sebelum ada css 3 untuk membuat sebuah background gradient menggunakan sebuah photosop lalu di repeat, tentu walau imagenya kecil pasti web akan terasa lebih berat.

Nah pada CSS3 sudah lebih baik karena kita dapat membuat warna gradient dengannya, sehingga tidak perlu repot lagi membuat gambar.
CSS3 juga memungkinkan kita membuat bentuk-bentuk dan memodifikasi tombol-tombol sehingga lebih menarik, mau tahu gimana cara bikinnya,
silakan praktekkan yang dimari :

.grad {
    background-image: -webkit-gradient(
        linear,
        /* style gradient*/
        left top,
        /* starting point */
        left bottom,
        /* ending point */
        from(blue),
        /*awal warna*/
        to(green)
        /*akhir warna*/
        );
    /*100% warna merah di tutupin  biru*/
    width: 90px;
    height: 100px;
    /*ben ada width sama height nya*/
}

.buttonstyle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px; 
    color: #ffffff; 
    padding: 10px 20px;
    /*ngatur text yang ada dalam button*/
    -webkit-border-radius: 15px;
    /*buat bikin button jadi rounded, jadi kesannya tidak menusuk */
    background: -webkit-gradient(
        linear, left top, left bottom, 
                /* style gradientnya linear, left top (starting point), left bottom (ending point) */
        from(#900000),
                /*warna awal*/
        to(#ffffff));
                /*sampai warna apa*/
                /*bisa juga menggunakan linear-gradient (tapi untuk browser terbaru), syntaxnya 
                linear-gradient(a,b ,c , d, e )
                a : linear, atau bisa juga kalau mau diagonal memakai (num)deg contoh : 100deg,
                b : starting point, contoh : left top
                c : ending point, contoh : left bottom
                d : from(color)
                e : to(color)
                sebenarnya colornya ini pun bisa bermacam2 juga, ini hanya dasar saja*/     }

ninosaji.blogspot.com

sayangnya beberapa browser belum support dengan css 3 ini.

referensi : http://www.css3files.com

Ditulis Oleh: Unknown Pada : Senin, 12 November 2012

Label : css