anchor based button

Pada dasarnya, semua elemen web dapat “ditargetkan” untuk di-styling menggunakan CSS.

Objektif tutorial kali ini adalah membuat anchor text terlihat seperti button. Hal ini berguna untuk menarik perhatian pengunjung untuk bagian-bagian tertentu yang hendak “ditonjolkan”. Sebagai contoh, anda bisa melihat anchor text “Download WordPress” di wordpress.org.

Konsep kunci pada tutorial ini:

  • Penggunaan Pseudo Class
  • Pseudo class :hover
  • Pseudo class :active
  • Pseudo class :focus
  • Aplikasi CSS3 untuk rounded corner dan efek inset

Markup HTML

Untuk mengaplikasikan efek button ini, markup HTML yang digunakan sangat sederhana: anchor text dengan satu class.

<a href="#">Submit</a>

Aplikasi CSS dasar

Target class dari anchor text diatas dengan a.button lalu beri warna, border, padding agar terlihat proporsional dan background dengan “irisan tipis” 5 x 30 piksel yang diulang-ulang secara horizontal dengan repeat-x.

background:url(button-bg.jpg) repeat-x top left;
color:#464646;
border:1px solid #bbb;
padding:5px 20px;
font-weight:bold;
text-decoration:none;

Aplikasi CSS3 untuk mempercantik tampilan

Yang akan kita gunakan disini adalah text-shadow untuk membuat efek shadow (yang kali ini akan diatur sedemikian rupa untuk membuat efek inset / letterpress)  dan border-radius (-moz-border-radius untuk browser bermesin gecko dan -webkit-border-radius untuk browser bermesin webkit) untuk membuat efek rounded corner. Tambahkan border-radius dan text-shadow kepada a.button.

text-shadow: 0 1px 0 #fff;
border-radius:10px;
-moz-border-radius:20px;
-webkit-border-radius:10px;

Lebih jelas mengenai text-shadow dan border-radius bisa dilihat di CSS3.info:

Pseudo class :hover

Pseudo class :hover memberikan efek kepada elemen yang tengah diarahkan kursor. Berguna sebagai pembeda dan memberi fokus kepada elemen yang tengah di select.

a.button:hover{
border:1px solid #8f8f8f;
}

Pseudo class :active

Pseudo class :active memberikan efek kepada elemen yang tengah dieksekusi: pada kasus ini, anchor text yang tengah di-klik.

a.button:active{
background:url(button-bg-pressed.jpg) repeat-x top left #dfdfdf;
}

Catatan: background yang digunakan di :active ini adalah background yang sama dengan yang digunakan sebelumnya, hanya diputar 180 derajat saja.

Pseudo class :focus

Anchor text yang sekarang telah di-styling sudah dapat bekerja dengan baik. Hanya saja, ketika anchor text tersebut di-klik, akan muncul dotted border disekeliling area tersebut. Gunakan Pseudo class :focus untuk menghilangkan dotted border teersebut

a.button:focus {
outline: 0;
}

Voila! Button dari anchor text ini telah bekerja dengan baik. Lihat demo button dari anchor text ini di halaman ini.

Button anda tidak berbentuk elips?

Jika anda menggunakan browser-browser yang belum mensupport CSS3 seperti keluarga internet explorer kebawah, button anda akan berbentuk kotak. Button ini memang ditargetkan untuk browser-browser modern yang sudah mensupport CSS3.  Beralihlah dari browser kuno yang tidak mensupport CSS3 yang anda gunakan dan beralihlah ke browser modern yang sudah mensupport CSS3 seperti Firefox, Chrome atau Safari.

Sebagai perbandingan, coba lihat dan bandingkan halaman depan wordpress.org – salah satu project open source paling terkemuka dan terkenal di muka bumi menggunakan browser FireFox dan Internet Explorer.

5 thoughts on “Membuat button dari anchor text dan CSS

  1. […] Membuat button dari anchor text dan CSS […]

  2. wah…. pusing…

  3. kalau menggunakan gambar yang udah ada trus dikasih anchor text bisa?

  4. gan gambarnya bisa di postingkan gk. tampilannya jadi jelek gan soalnya saya gk punaya gambar yg di pake agan. thank’s gan

    1. Gambarnya kurang lebih sama dengan yang ada di awal post kok 🙂

Share Your Thought