Fungsi CSS Me Non-Aktifkan Link

Pada tulisan ini kita hanya akan bereksperimen dengan Fungsi CSS Me Non-Aktifkan Link , ada kasu...


Pada tulisan ini kita hanya akan bereksperimen dengan Fungsi CSS Me Non-Aktifkan Link, ada kasus dimana terkadang dalam sebuah kondisi kita harus menon-aktifkan/mendisable sebuah link, misal dalam sebuah halaman administrator, ketika yang login Admin orang bisa melakukan edit terhadap sebuah artikel (link aktif), namun ketika yang login adalah operator maka link untuk edit sebaiknya di non-aktifkan, tapi tidak dihilangkan agar terlihat perbedaan.

Fungsi CSS Me Non-Aktifkan Link

Biasanya kita menggunakan javascript untuk mematikan link tersebut (tapi jika javascript browser di non-aktifkan maka ini jadi tidak berguna) atau dikondisikan di kode program agar link nya tidak di cetak. Tapi dengan cara itu link masih terlihat aktif dan bisa di klik.

Kali ini kita akan mencoba membuat link tidak dapat di klik, sekalipun javascript dimatikan. Kita hanya memerlukan sebuah class dan selanjutnya disetting di css agar link tidak bisa di klik, atau seolah non-aktif.

Buat struktur HTML sebagai berikut.
[<div class="box">
<a class="tombol" href="http://www.twitter.com/tut_web" target="_blank" title="Twitter @tut_web">Twitter</a>
<a class="tombol disabled" href="http://www.flickr.com" target="_blank" title="Flickr">flickr</a>
<a class="tombol" href="http://www.facebook.com/tutwebdesign" target="_blank" title="Facebook Fan Page">Facebook</a>
<a class="tombol" href="http://www.tutorial-webdesign.com" target="_blank" title="Official website">Website</a>
</div>]
Dapat dilihat pada link ke-2 yang menuju flickr diberi class .disabled
Styling
Dan untuk css nya sebagai berikut.

[* {
margin: 0;
padding: 0;
}
body {
padding: 3em 2em;
font-size: 1em;
line-height: 1;
}
a {
text-decoration: none;
}
body {
  text-align: center;
}
h1, p {
margin:20px 0;
}
.tombol {
display: inline-block;
padding: 10px 12px;
color: #fff;
text-decoration: none;
background: #3B5998;
border-radius: 3px;
}
.tombol:hover {
background:orange;
}
.disabled {
pointer-events: none;
opacity:0.5;
}
</div>]
Yang perlu diperhatikan disitu adalah bagian class .disabled dimana adapointer-events:none yang akan menonaktifkan link, dan opacity:0.5 yang akan membuat tombol seakan buram dan tidak aktif.

Download Code


Nama

Inspiration Photografer Photoshop Software Video Tutorial Web Design
false
ltr
item
Desain Grafis, Tutorial dan Inspirasi : Fungsi CSS Me Non-Aktifkan Link
Fungsi CSS Me Non-Aktifkan Link
https://1.bp.blogspot.com/-LMuIrBb75DA/UTtnK0pJ-QI/AAAAAAAAJtU/ajZ_554slEY/s320/main.gif
https://1.bp.blogspot.com/-LMuIrBb75DA/UTtnK0pJ-QI/AAAAAAAAJtU/ajZ_554slEY/s72-c/main.gif
Desain Grafis, Tutorial dan Inspirasi
http://www.javagrafis.com/2013/03/fungsi-css-me-non-aktifkan-link.html
http://www.javagrafis.com/
http://www.javagrafis.com/
http://www.javagrafis.com/2013/03/fungsi-css-me-non-aktifkan-link.html
true
917012177411184077
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy