Posted in Komputer/IT

Style Button dengan CSS 3


Style Button dengan CSS 3

Elemen button pada html bisa kita style dengan mudah hanya dengan CSS 3 tanpa menggunakan image editor. Gambar berikut adalah hasil akhir button yang telah di-style oleh CSS 3

button
Styled Button

Langkah-langkah: 

1. Tulis markup html yang akan di-style

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Button Style</title>
  <style>
  button {

  }
  </style>
  </head>
  <body>
    <button type="submit">Submit</button>
  </body>
</html>

Output:

button-1
Raw Button

2. Buka http://www.colorzilla.com/gradient-editor/ untuk membuat css gradient. Pilih / edit salah satu style yang disediakan sesuai design yang diinginkan. Catatan: Dengan gradient editor kita tidak perlu menulis kode gradient secara manual. Karena untuk membuat gradient pada CSS 3 membutuhkan kode yang begitu kompleks.

gradient-editor
Ultimate CSS Gradient Editor

Copy kode CSS yang di-generate oleh gradient editor lalu paste ke dalam kode kita (ke dalam selector “button” )


...
button {
  background: rgb(242,246,248); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,246,248,1)), color-stop(50%,rgba(216,225,231,1)), color-stop(51%,rgba(181,198,208,1)), color-stop(100%,rgba(224,239,249,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
}
...

Output:

button-2
Gradient Button

3. Edit / tambah style agar text pada button match dengan warna gradient

...
button {
  background: rgb(242,246,248); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,246,248,1)), color-stop(50%,rgba(216,225,231,1)), color-stop(51%,rgba(181,198,208,1)), color-stop(100%,rgba(224,239,249,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
  border: 0; /* hilangkan border button */ 
  border-radius: 15px; /* agar ujung button menjadi rounded */ 
  -moz-border-radius: 15px; /* agar ujung button menjadi rounded (untuk firefox) */ 
  color: #e00; /* warna text */ 
  font: bold 24px sans; /* font */ 
  padding: 10px 25px; /* spasi antara text dengan pinggir button */ 
  text-shadow: 1px 1px 1px grey; /* shadow pada text */ 
} 
button:hover { 
  color: #f00; /* warna ketika mouse berada di atas button */ 
} 
button:active { 
  color: #fff; /* warna ketika button diklik */ 
} 
...

Hasilnya:

button
Finished Button

Download source:
css_button.zip (Jangan lupa mengganti ekstensi doc dengan zip)

Selamat mencoba!
Wassalam

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s