Pada tulisan ini kita hanya akan bereksperimen dengan css dengan menon-aktifkan sebuah 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.
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.
Dapat dilihat pada link ke-2 yang menuju flickr diberi class
.disabled
Styling
Dan untuk css nya sebagai berikut
Yang perlu diperhatikan disitu adalah bagian class .disabled
dimana ada pointer-events:none
yang akan menonaktifkan link, dan opacity:0.5
yang akan membuat tombol seakan buram dan tidak aktif.
DEMO | Download Code
Sekian tutorial kali ini, Salam dan maju terus web design Indonesia.
makasih ya gan :D
Yooo…
[…] teks yang ada di website kita dengan bermodalkan CSS. Sebalumnya kita pernah membahas tentang menonaktifkan sebuah link dengan css, sekarang kita akan menonaktifkan fungsi seleksi terhadap konten/teks yang ada di […]
keren hanya pekai css bisa menonaktifkan link,baru tahu saya..
makasih triknya om..
terimakasih gan, fungsi
Gan, mau nanya kalau mau mematikan link pada fungsi tooltip gmana?
misalnya begini. inikan saya dah punya tooltip kalau disentu tulisannya akan keluar gambar. cuma saya mau mematikan link aktifnya supaya kalau di kelik itu tulisannya tidk lari kelink nya. itu gmana ya gan,,?? please gelp me.. Terima kasih sebelumnya.