Membuat Button Elegan dengan CSS3

Repost dari artikel saya di PC Mild 19/2010

CSS adalah sebuah bahasa scripting untuk membuat style atau tampilan dari sebuah halaman html. Saat ini CSS telah semakin berkembang, dengan versi terbarunya adalah CSS3.

Perkembangan CSS ini bahkan mampu menggantikan fungsi gambar (image) dalam pembuatan desain website, memberikan fleksibilitas lebih, namun dengan sesedikit mungkin file yang terlibat. Tombol lingkaran dan gradasi (rounded and gradient button) dengan desain elegan yang dulunya memerlukan peran image sebagai pembentuknya, saat ini dapat dibuat hanya dengan menggunakan CSS, seperti contoh di bawah ini.

Contoh button dengan CSS3

Untuk membuat button tersebut, ada beberapa css property yang digunakan. -webkit-gradient dan -moz-linear-gradient akan menampilkan gradasi warna pada button. Berikutnya, property border-radius dan -moz-border-radius akan membuat bagian pojok button menjadi bulat. Masih banyak property lain yang sangat berguna dalam mebuat desain yang fantastis.

Salah satu hal yang penting adalah membuat css ini dapat mengeluarkan output yang sama di semua browser. Karena itu, perlu dilakukan deklarasi seperti “webkit” atau “moz” seperti di atas. Perlu diketahui, Internet Explorer adalah browser yang paling tidak support dengan berbagai property CSS3 ini.

Untuk membuat button elegan dengan CSS3 ini, berikut langkah-langkahnya.

  1. Pertama-tama, membuat halaman html yang menampilkan input dengan type “button” seperti biasa.
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Button http://haqqi.net</title>
        <style type="text/css">
          input[type=button], button {
            /* tempat menambahkan style */
          }
        </style>
      </head>
      <body>
        <input type="button" value="Login" />
      </body>
    </html>
  2. Untuk mengubah style seluruh elemen input dengan type button, berikut elemen button itu sendiri, maka gunakan selector input[type=button], button seperti contoh di atas. Sebagai langkah awal, deklarasikan ukuran button tersebut.
    padding: 5px;
    width: 90px;
  3. Langkah berikutnya, mengubah outline dari button dengan outline-width menjadi nol untuk mencegah webkit menampilkan border yang kurang baik pada saat mouse focus. Setelah itu, atur juga radius dari rounded button-nya dengan border-radius dan -moz-border-radius menjadi 50px. Berikut ini baris yang perlu ditambahkan.
    outline-width: 0;
    border: 1px solid #000;
    border-radius: 50px;
    -moz-border-radius: 50px;

    Button dengan border radius

  4. Langkah berikutnya, menambahkan shadow atau bayangan ke button tersebut. Ada 3 property yang perlu dideklarasikan. Satu untuk Mozilla, satu untuk webkit, dan satu untuk property CSS3 itu sendiri, yang digunakan oleh Opera. Perubahan pada button hanyalah penambahan shadow di bagian bawah.
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  5. Berikutnya, untuk membuat button semakin elegan adalah menambahkan gradient. Terdapat perbedaan kecil antara beberapa browser. -webkit-gradient digunakan untuk membuat linear gradient pada webkit, sedangkan untuk Mozilla, property yang digunakan adalah -moz-linear-gradient. Setelah itu, sudut atau arah gradient juga harus dideklarasikan. Belum terlihat terlalu banyak perubahan, karena script ini hanya mendeklarasikan gradient, tanpa mengubah warnanya. Perlu diketahui juga bahwa CSS gradient ini berlaku sebagai sebuah image, dalam hal ini adalah background image.
    background-image: -webkit-gradient(linear,
        left top, left bottom,
        color-stop(0.0, rgba(255, 255, 255, 0.8)),
        color-stop(0.01, rgba(255, 255, 255, 0.6)),
        color-stop(0.5, rgba(255, 255, 255, 0.3)),
        color-stop(0.5, rgba(255, 255, 255, 0.2)),
        color-stop(1.0, rgba(255, 255, 255, 0.0)));
    background-image: -moz-linear-gradient(top,
        rgba(255, 255, 255, 1.0) 0%,
        rgba(255, 255, 255, 0.6) 1px,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.0) 100%);
  6. Untuk menambah keindahan, pada bagian dalam juga bisa ditambahkan inner drop shadow, yang akan menjadi sinar highlight. Tambahkan baris di bawah ini.
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9),
        inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
        inset 0px 1px 0px rgba(255, 255, 255, 0.5);
  7. Untuk menampilkan hasil gradient, warna ditambahkan dalam script. Termasuk warna font dan background.
    background-color: #474;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
  8. Sebelum menambahkan style lain, ada baiknya untuk membuat mekanisme transisi button dari satu state ke state yang lain. Transisi ini bekerja layaknya sebuah animasi. Tambahkan lagi baris di bawah ini dalam selector.
    -webkit-transition: background-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        -webkit-box-shadow 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        -moz-box-shadow 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;

    Button dengan gradient dan shadow

  9. Button telah terlihat elegan. Namun button tersebut belum bereaksi seperti layaknya sebuah button. Karena itu, harus ditambahkan styling ketika button tersebut hovered, focused, dan clicked. Untuk menambahkannya, harus dilakukan dalam selector baru, yaitu input[type=button]:hover, input[type=button]:focus, button:hover, dan button:focus.
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
    background-color: #696;
  10. Langkah terakhir, untuk membuat style ketika button diklik, harus diatur dalam selector input[type=button]:active dan button:active.
    background-color: #222;
    color: #ccc;
    -webkit-transition-duration: 0.0s;
  11. Pembuatan button elegan telah selesai, berikut ini adalah seluruh script-nya beserta contoh hasilnya. Untuk membuatnya tampak berbeda, cukup mengubah saja background color yang digunakan.
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Button http://fauzilhaqqi.net</title>
        <style type="text/css">
          input[type=button], button {
            /* tempat menambahkan style */
            padding: 5px;
            width: 90px;
            outline-width: 0;
            border: 1px solid #000;
            border-radius: 50px;
            -moz-border-radius: 50px;
    
            -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    
            background-image: -webkit-gradient(linear,
                left top, left bottom,
                color-stop(0.0, rgba(255, 255, 255, 0.8)),
                color-stop(0.01, rgba(255, 255, 255, 0.6)),
                color-stop(0.5, rgba(255, 255, 255, 0.3)),
                color-stop(0.5, rgba(255, 255, 255, 0.2)),
                color-stop(1.0, rgba(255, 255, 255, 0.0)));
            background-image: -moz-linear-gradient(top,
                rgba(255, 255, 255, 1.0) 0%,
                rgba(255, 255, 255, 0.6) 1px,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.0) 100%);
    
            -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9),
                inset 0px 1px 0px rgba(255, 255, 255, 0.5);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
                inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    
            background-color: #474;
            color: #fff;
            text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
    
            -webkit-transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out,
                -webkit-box-shadow 0.2s ease-in-out;
            -moz-transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out,
                -moz-box-shadow 0.2s ease-in-out;
            -o-transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
          }
          input[type=button]:hover, input[type=button]:focus,
          button:hover, button:focus {
            -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
            -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
            background-color: #696;
          }
          input[type=button]:active, button:active {
            background-color: #242;
            color: #ccc;
            -webkit-transition-duration: 0.0s;
          }
          body { padding: 20px; }
        </style>
      </head>
      <body>
        <input type="button" value="Login" />
      </body>
    </html>

    Berbagai tampilan hasil button

Download source code keseluruhan.

Artikel ini telah dipublikasikan di media cetak tabloid PC Mild edisi 19 tahun 2010 lalu.

7 Comments

  1. Suadah saya coba. siipppp
    Lebih banyak lagi artikel tentang CSS3, dan juga HTML5 mas…

    btw punya file documentationnya g mas yg CSS3?

    Reply

Leave a Comment.