Selamat Datang

Non-Aktifkan Link Dengan CSS

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.

disable-link-css

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;
		}

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.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

7 thoughts on “Non-Aktifkan Link Dengan CSS

  1. […] 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 […]

  2. keren hanya pekai css bisa menonaktifkan link,baru tahu saya..

  3. freebiexp says:

    makasih triknya om..

  4. arek dolan says:

    terimakasih gan, fungsi

  5. Andi khalik says:

    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.

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development