Menyimpan Link Pada Button CSS

Menyimpan Link Pada Button CSS

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

47 Comments Add Comment

seperti sambungan tutorial semalam nih mas adhy hehehe :-bd

Balas

siap dan langsung dipraktekan hehehe :)

Balas

Hehehe itu yang di link PREVIOUS mas :)

Balas

Silahkan sis :)

Balas

tapi saya udah punya tombol tersendiri

Balas

Hehehee tombol di atas hanya sebagai contoh aja mas :D

Balas

yakeren juga, kalo tomblol di blog saya ribet css nya kerena digabungkan juga dengan font awesome

Balas

seperti tombol demo ini
http://dbunggulblog.blogspot.com/2013/12/social-media-sprite-icon.html

Balas

Nah ini ada perbaikan, sebelumnya saya menaruh link di mode compose jadi seperti Tombol 2... sip, trims mas ;)

Balas

Jadi keren Tombolnya ya mas broo
tak simpan dulu ya mas broo

Balas

ohh yang button 3D itu yang mas :D asik ada sambungannya juga ternyata saya pelajari ahh..

Balas

Lanjutan artikel kemarin kalau gak salah yah Kang Adhy :)
Simak dulu dan di pelajari dulu yah Kang. terima kasih sudah berbagi :-bd

Balas

Maaf oot Kang emotionya unik menarik Kang @@,
Gimana cara gantinya yah Kang Adhy :-d

Balas

Sekarang dtambahin link kang, mantap :-bd

Balas

Ternyata untuk membuat tombol sekecil itu dibutuhkan CSS yang lumayan banyak ya mas (bagi saya) @@, tapi untuk pemasangannya sangat simple :D

Balas

Iya sis jika kita menggunakan tombol CSS dengan link, maka ke harus dalam keadaan HTML ketika postingan dipublish.

Balas

Silahkan mas Tazam :D

Balas

Silahkan bang Ronny :)

Balas

Hehehehe silahkan tunggu sekuel selanjutnya hehehe =D

Balas

Kang Saud kan udah pakai threaded comment hack, nah tinggal ganti gambar emotnya pada Emo_List nya. Coba cari kode seperti ini
Emo_List = [

Balas

Iya mas biar pemakaiannya tepat :)

Balas

Iya mas diperlukan css yang lumayan banyak. Tapi anehnya kalau di web itu kode segitu banyak loading blognya maih cepat ketimbang kita menggunakan gambar tombol langsung :)

Balas

wow banget kang, tinggal dikasih class jadi deh button keren, beda kalo pake html biasa ya, ribet pisan hohoho

Balas

salah penempatan juga bisa berbeda tampilan ya, baru tau saya... oia mas maaf sebelumnya, cara mengelompokkan beberapa widget ke dalam satu widget seperti di blog ini bagaimana ya? yang ini http://goo.gl/lzyXQx

mungkin ada tutorialnya disini, tapi saya kurang tau judulnya apa

Balas

Mantap kang Infonya salam blogger Sunda :ng

Balas

Ceritanya lanjutan yang kemarin nih mas =D

Balas

Sorry OOT mas..Cara membuat Widget Most Populer seperti di sidebar blog ini gmn caranya mas. minta tutornya dong?

Balas

mas adhi boleh gk saya minta tolong? setelah saya cek blog saya ada 3 error ? agan tau gk cara ngilangnnya? saya bingung makasih :)
http://validator.w3.org/check?uri=http%3A%2F%2Funduhdroid.blogspot.com&charset=%28detect+automatically%29&doctype=Inline&group=0

Balas

Itu kesalahan penyimpanan link label yang menggunakan dua kata pada menu header, tambahkan kode %20 pada spasi-nya. seperti ini.
Contoh:
/search/label/Aplikasi Android
rubah menjadi
/search/label/Aplikasi%20Android
lakukan hal yang sama pada semua link label pada menu yang menggunakan dua kata.

Balas

Heheheh iya kang :D

Balas

Salam juga kang Fajri :D

Balas

Iya kang hehehehe biar fungsi tombolnya berjalan baik =D

Balas

Iya nanti saya coba share :D

Balas

Oh, waktu itu komennya pakai hp, jadi gak terlalu teliti :D

Balas

Itu tambah HTML biasa mas, lalu diisi script twitter, di bawahnya Join site, alexa, dan pagerank. Dengan rata tengah

Balas

Perlu juga ne di coba
Thankz mas atas tutor nya =D
#Salam Damai - bangbarus.blogspot.com

Balas

Maskdunya menggunakan gambar sebagai link ya mas ?

Balas

biar tidak kebanyakan kode, kayaknya lebih praktis seperti ini kang :

<a class="ButtonOK" href="URL Tujuan">Anchor Link</a>

Balas

Kalau saya masih pake class='download/demo' buatan kangismet nih hehe :)

Balas

bener tuh kata kang ismet :D . haha 1 html markup dengan menginput class yang di tuju di dalamnya , memang lebih simple ..

Balas

Betul kang untuk lanjutan ini hehehee :)

Balas

Mantab, nambah ilmu...

Balas

pengen nyobain pasang link di button ini kang, tapi masangnya pengen ala "More Menu"...gantiin tanda + ditemplate kompimales tea kang...gimana dong?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×