Menyimpan Link Pada Button CSS

Link Pada Button CSS
Tombol atau button adalah sesuatu untuk ditekan untuk mengaktifkan fungsi lainnya yang terdapat di dalam tombol tersebut. Ketika sebuat tombol ditekan, maka akan ada fungsi lainnya yang akan berjalan.

Salah satu fungsi tombol ini yaitu untuk membuka sebuah link dalam sebuah blog. Menaruh sebuah link di blog adalah hal dasar dan mudah dalam membuat sebuah blog.

Namun jika tombol tersebut dibuat dengan menggunakan CSS, maka ada hal yang lain yang harus diperhatikan lebih teliti agar tombolnya lebih berfungsi dengan baik. 

Secara sederhana sebuah link akan berupa kode seperti ini.

<a href="URL Tujuan">Klik Di sini</a>

Jika ingin menggunakan gambar, maka tulisan "Klik Di sini" tinggal diganti dengan kode gambar seperti di bawah ini.

<a href="URL Tujuan"><img src="URL Gambar"/></a>

Begitu pun dengan tombol yang dibuat dengan kode CSS, tinggal ganti saja tulisan "Klik Di Sini" atau "<img src="URL Gambar"/>" tersebut dengan kode pemanggil tombolnya misalnya seperti di bawah ini.

<a href="URL Tujuan"><div class="ButtonOK">button</div></a>

Mudah bukan? Tapi banyak juga yang menyimpan link pada button CSS ini dibalik sehingga fungsi tombolnya kurang maksimal seperti di bawah ini.

<div class="ButtonOK"><a href="URL Tujuan">button</a></div>

Memang tidak salah namun fungsi tombolnya jadi tidak maksimal. Saya ilustrasikan pada tombol-tombol di bawah ini.

Tombol dengan kode seperti ini (Tombol 1): 
<a href="URL Tujuan"><div class="ButtonOK">button</div></a>



Tombol dengan kode seperti ini (Tombol 2) - Kurang berfungsi dengan baik
<div class="ButtonOK"><a href="URL Tujuan">button</a></div>


Coba Anda perhatikan, pada Tombol 1 semua daerah tombol bisa diklik dan berfungsi, namun pada Tombol 2 linknya bisa berfungsi jika Anda meng-klik-nya tepat pada tulisan "button" saja sedangkan di luar itu tombolnya tidak berfungsi dengan baik.

Demikian sharing kali ini, mudah-mudahan sharing tutorial ringan ini bisa dimengerti dan bermanfaat...

Oh iya... jika Anda ingin mencoba membuat tombol seperti di atas, silahkan baca juga postingannya pada link di bawah ini.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments