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.

Menambahkan Scroll Bar pada HTML menggunakan CSS

Dalam membuat web, terkadang kita ingin menambahkan scroll bar dalam konten web. Untuk menambahkannya, anda dapat menggunakan CSS. Ya, anda tidak perlu bingung, berikut ini adalah contoh sintaks CSS yang saya gunakan:

div.scroll { height: 50; overflow:auto;}

Posisi scroll bar tergantung dengan ukuran tabel yang anda buat, jika lebar tabel adalah 100 pixel, dan jika pada css-nya ditambahkan width:50 maka akan terbentuk scroll bar juga secara horizontal.