Tutorial Web Design

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.

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

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.