Membuat Custom Button dengan CSS

Ada kalanya kita ingin membuat button di halaman web tetapi kita ingin tampilan buttonnya berbeda atau kita desain sendiri gambarnya. Kita dapat menggunakan CSS untuk mendesain button dengan tampilan yang kita inginkan. Berikut ini adalah contoh CSS-nya:

.buttonLogin {
  display: block;
  background-image: url(image/login.png);
  background-repeat: no-repeat;
  width: 59px;
  height: 21px;
  /* ukuran width dan height menyesuaikan dengan ukuran gambar desain button */
}

Disini saya menggunakan gambar login di bawah. Gambar tersebut saya simpan dalam folder image.

Lalu dalam form kita tinggal menambahkan button tadi dengan sintaks seperti berikut:

<input class="buttonLogin" type="Submit" value=" " />

Maka button Submit yang anda buat akan seperti gambar desain tadi. Untuk trik lebih lanjut, anda dapat mempelajarinya disini.