Membuat Rounded Box dengan CSS
21 November 2009Jika anda menggunakan browser Mozilla Firefox, Safari, atau Google Chrome, ketika anda melewatkan kursor pada salahsatu menu navigasi yang ada diatas (home, about, dll) pasti tombol pada menu tersebut akan menampilkan background kotak merah dengan sudut yang agak membulat. kotak warna merah tersebut bukanlah sebuah image, melainkan hasil render dari style yang sudah ditentukan dari stylesheet theme blog ini. untuk membuatnya cukup dengan menuliskan beberapa baris kode pada stylesheet (CSS) dari halaman web.
Saya bukan web designer dan pengetahuan saya tentang HTML+CSS masih sangat minim, tp saya hanya ingin berbagi sedikit tips untuk membuat hover button dengan rounded box (kotak dengan pinggiran membulat). kita asumsikan kita akan membuat sebuah link yang ketika dilewati kursor (hover) akan berubah menjadi bentuk tombol dengan rounded corner. kode HTML untuk linknya misal sebagai berikut:
<a href="http://blog.hielmy.web.id">Mie's Notes</a>
Nah sekarang mari kita buat stylesheet untuk hover button-nya, dalam syntax HTML tag untuk link adalah antara <a> maka kita harus membuat selektor untuk tag <a> ini, kemudian diberi properties untuk jenis huruf dan warna text. secara default, sebuah link akan diberi garis bawah, untuk menghilangkannya bisa ditambahkan properties text-decoration:none;, berikut kode lengkapnya: baca selengkapnya »
