Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati. Kali ini saya akan membahas tentang cara Membuat Button Dengan Background Color Gradient. Color gradient adalah kombinasi warna lebih dari  1 tanpa mencampurkan warnanya.

Oke temen-teman, langsung saja kita buat struktur htmlnya terlebih dahulu ya untuk memulai Membuat Button Dengan Background Color Gradient. Scriptnya sebagai berikut ini.

Nah, jika sudah selesai maka kita masuk ke css untuk membuat style color gradient pada buttonnya. Berikut scriptnya ya teman-teman.

Nah teman-teman bisa perhatikan di bagian property backround dengan value color gradientnya. Disini saya menggunakan dua value yang berbeda pada bagian posisi gradientnya. Jika sudah selesai mtema-teman buka di browser masing-masing maka akan terlihat perbedaanya dan tampilannya akan seperti pada gambar di bawah ini.

Membuat Button Dengan Color Gradient

Tidak hanya dua saja, tapi posisi pada gradient bisa kita atur menjadi 8 sisi.

  • To Bottom yaitu memberikan efek color gradient secara horizontal dan ke arah bawah
  • To Top yaitu memberikan efek color gradient secara horizontal dan  ke arah atas
  • To Right yaitu memberikan efek color gradient secara vertical dan  ke arah kanan
  • To Left yaitu memberikan efek color gradient secara vertical dan  ke arah kiri
  • To Top Right  yaitu memberikan efek color gradient ke arah atas kanan
  • To Top Left yaitu memberikan efek color gradient ke arah atas kiri
  • To Bottom Right yaitu memberikan efek color gradient ke arah bawah kanan
  • To Bottom Left yaitu memberikan efek color gradient ke arah bawah kiri

Demikian artikel tentang cara Membuat Button Dengan Background Color Gradient. Semoga bermanfaat dan selamat mencoba ya teman-teman.