Membuat Rounded Box dengan CSS

Jika 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:

a {
color: black;
font-family: georgia;
text-decoration:none;
}

Nah sekarang kita buat stylesheet untuk hover button-nya dengan membuat lagi selektor a:hover. kita asumsikan ketika kursor lewat, tombol tersebut akan berwarna merah dan text akan berubah warna menjadi putih, agar kotak tersebut tidak terlalu mepet ke text, maka perlu diberi jarak misal 5 pixel dengan menambahkan properties padding:5px;. berikut kode CSS-nya:

a:hover {
color:white;
background-color: red;
padding: 5px;
}

Sebenarnya sampai sini anda sudah bisa membuat sebuah hover button untuk link, namun jika anda ingin tampilan yang lebih artistik dengan sudut kotak yang membulat, maka kita bisa tambahkan properties pada selektor a:hover sebagai berikut:

-moz-border-radius: 5px;
-webkit-border-radius: 5px:

Penambahan properties border-radius akan membuat browser merender kotak tersebut menjadi membulat (rounded), angka 5px adalah ukuran bulatan dalam satuan pixel. namun yang perlu diingat, agar rounded box ini bisa dirender dengan benar oleh browser, maka kita harus menuliskan secara spesifik browser engine untuk properties ini yaitu -moz untuk keluarga Mozilla (yang menggunakan engine Gecko), dan -webkit untuk browser yang menggunakan engine WebKit seperti Safari dan Chrome.

Opera sendiri secara native belum mendukung properties border-radius ini, jadi jika kita membukanya dengan Opera kotak tersebut akan tetap bersudut lancip. untuk mengatasinya, kita bisa menggunakan SVG sebagai alternatif background box. SVG adalah gambar vector yang dihasilkan dengan menggunakan kode XML, untuk membuatnya tidak perlu bersusah payah mempelajari bahasa XML, cukup dengan menggunakan Rounded corner SVG Generator yang bisa diakses disini. setelah jadi copy kode yang ada di bagian CSS with SVG output ke selector a:hover pada stylesheet kita, seperti berikut:

a:hover {
color:white;
background-color: red;
padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px:
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSJyZWQiIHJ4PSI2IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+);
}

berikut adalah kode lengkap untuk HTML dan CSS dari contoh diatas:

 
<!--
a {
color:black;
font-family:georgia;
text-decoration:none;
padding:5px;
}
 
a:hover {
color:white;
background-color: red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSJyZWQiIHJ4PSI2IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+);
}
-->
 
<a href="http://blog.hielmy.web.id">Mie's Notes</a>

Nah jika anda ingin tahu seperti apa hasilnya, silakan klik DISINI.

Dengan demikian, hampir semua browser populer bisa membuka desain kita dengan benar, kecuali Internet Explorer 6, saya sudah mencobanya dan properties SVG pun tidak bisa di render dengan baik, makanya saya tidak menyarankan membukanya dengan menggunakan IE 6.

Itulah tutorial singkat dan tidak jelas dari saya, mohon maaf kalau banyak kesalahan, saya masih sangat awam dalam HTML+CSS, saya hanya ingin berbagi, semoga bermanfaat

Tulisan lain yang mungkin berkaitan:

• Membuat Text Effect Dengan CSS
• Chat Facebook dengan XMPP/Jabber Client
• WordPress Berbahasa Indonesia
• Membalas komentar Facebook melalui Email