ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Penulisan Style CSS Untuk Link (Element Anchor)


Hai Sobat, pada kesempatan kali ini kita akan sedikit membahas penulisan style untuk element anchor, karena sering kali kita telah menuliskan style untuk element <a> yang secara kaidah sudah benar, namun ketika dijalankan di browser, style tersebut tidak bekerja sebagaimana mestinya, seperti style hover yang tidak bekerja pada element anchor, oleh karena itu pada kesempatan ini kita akan membahas cara penulisan style css untuk element anchor.

Seperti kita ketahui bahwa element link dapat diberi style dengan berbagai CSS property, seperti: color, font-size, display, text-decoration, dll, hingga dapat membuatnya tampak seperti tombol (button), disamping itu juga dapat diberi style menggunakan beberapa pseudo class, yaitu:

  • a:link, style untuk element a normal, belum diklik.
  • a:visited, style untuk element a dimana link telah dikunjungi/di klik
  • a:hover, style untuk element a ketika mouse berada diatas element (:hover)
  • a:active, style untuk element a ketika di klik (mouse ditekan, belum dilepas).

Pseudo Class :link

Mungkin sebagian bertanya mengapa ada :link? bukankah element a otomatis merupakan link?, jawabnya mengacu pada Spesifikasi CSS bahwa :link disini mengacu pada semua element HTML yang memiliki attribut href,  yaitu element <a>, <area>, dan <link> – yang ada pada header untuk stylesheet, namun dari ketiganya, hanya element <a> yang dapat di berikan style, sehingga :link{} atau a:link{} sama dengan a[href]{} (element a yang memiliki attribute href, dengan nilai apapun) atau cukup a{}.

Pseudo Class :visited

Pseudo class :visited digunakan ketika user telah mengunjungi url/link tersebut, hal ini untuk mempermudah user untuk membedakan link yang telah dikunjungi (di click) dan yang belum dikunjungi. Untuk alasan keamanan, seperti yang dijelaskan oleh Mozilla pada halamannya Privacy_and_the_:visited_selector, hanya beberapa properties yang diijinkan untuk di berikan style, yaitu:

Properties pada pseudo class :visited dapat bekerja jika sebelumnya telah didefinisikan pada pseudo class :link, misal: kita ingin merubah warna link yang telah kita kunjungi menjadi merah dengan menuliskan properties color: red pada pseudo class :visited, warna link tersebut dapat berubah jika pada pseudo class :link juga telah didefinisikan properties color nya.

Pseudo Class :hover

Pseudo class :hover akan aktif pada saat mouse berada diatas element. Class ini dapat digunakan pada semua element, namun khusus untuk browser Internet Explorer versi 6 dan sebelumnya, pseudo class :hover hanya dapat digunakan pada element anchor. Pseudo class :hover pada element selain anchor salah satunya digunakan untuk membuat dropdown menu yang biasanya diterapkan pada element <li>.

Pseudo Class :active

Pseudo class :active digunakan ketika link di klik dan mouse pada posisi ditekan (belum dilepas), dan biasanya hanya terlihat sepintas. Contoh berikut akan memberi efek tombol turun ke bawah lima pixel ketika di klik dan akan memberi kesan efek 3D.

Push me!

Pseudo Class :focus

Pseudo class :focus aktif ketika link mendapatkan focus, focus disini seperti pada inputbox ketika ada cursor didalamnya, untuk link, pseudo class ini aktif salah satunya ketika kita menekan tab pada keybord untuk beralih dari bagian satu ke bagian lain, dan ketika mengenai link, maka pseudo class :focus akan aktif. Sebagai contoh, arahkan cursor pada input dibawah ini, kemudian tekan tombol tab, maka focus akan beralih ke link yang ada di bawahnya.

Kaidah Penulisan

Penulisan pseudo class untuk link harus memperhatikan urutan tertentu, yaitu:

  1. Pseudo class :hover harus ditulis setelah :link dan :visited.
  2. Pseudo class :active harus ditulis stelah :hover

Contoh penulisan pada CSS:

a:link {
	color: green;
	text-decoration: none;
}
a:visited {
	color: green;
}
a:hover {
	color: red;
}
a:active {
	color: green;
}

jika tidak memenuhi kaidah diatas, maka style yang kita buat tidak akan bekerja sebagaimana mestinya, hal ini disebabkan karena semua selector diatas memiliki prioritas yang sama (baca: specification), sehingga jika a:link berada diurutan dipaling bawah, akan menimpa (overide) semua style diatasnya, salah satu akibatnya pseudo-class :hover tidak akan bekerja, oleh karena itu, selalu perhatikan urutan penulisannya. Untuk memudahkan menghafal urutan, ada yang membuatnya menjadi suatu istilah yaitu: LoVe HAte (Link Visited Hover Active) atau LVHA .

Berbagai Contoh CSS Untuk Link

Link simpel berupa text, tanpa garis bawah:

Css Rule:

.simple-link a:link {
	text-decoration: none;
	color: #6565FF;
	transition: all .3s;
}
.simple-link a:visited {
	color: #3333AF;
}
.simple-link a:hover {
	color: red;
}
.simple-link a:active {
	color: orange;
}

Link berupa tombol:

CSS Rule:

.button-link a:link {
	text-decoration: none;
    display: inline-block;
    background-color: #237DC3;
    color: #FFFFFF;
    padding: 10px 25px;
    transition: background .3s;
}
.button-link a:visited {
	color: #FFFFFF;
}
.button-link a:hover {
	background-color: #2F93D8;
}

Link berupa tombol icon:

CSS Rule:

@font-face {
	font-family: 'icomoon';
	src:url('../icon_fonts/icomoon/icomoon.eot?w6aef1');
	src:url('../icon_fonts/icomoon/icomoon.eot?w6aef1#iefix') format('embedded-opentype'),
		url('../icon_fonts/icomoon/icomoon.ttf?w6aef1') format('truetype'),
		url('../icon_fonts/icomoon/icomoon.woff?w6aef1') format('woff'),
		url('icon_fonts/icomoon/icomoon.svg?w6aef1#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.fb {
	font-family: icomoon;
	font-size: 40px;
	line-height: 65px;
	background-color: #EAEAEA;
	color: #5D5D5D;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
	overflow: hidden;
	transition: all .3s;
}
.fb:before,
.fb:after {
	content: "f09a";
	position: absolute;
	width: 100%;
    height: 100%;
	left: 0;
	transition: all .3s;
}
.fb:before {
	top: 0;
}
.fb:after {
	top: 100%;
	color: #FFFFFF;
}
.fb:hover {
	background-color: #3b5998;
}
.fb:hover:after {
	top: 0;
}
.fb:hover:before {
	top: -100%;
}

Untuk contoh lengkap link berbentuk tombol icon sosial media, sobat dapat membuka halaman: Membuat 15 Efek Social Media Button Dengan CSS Part I atau Membuat 15 Efek Social Media Button Dengan CSS Part II

Demikian pembahasan mengenai cara penulisan style css untuk element anchor, semoga bermanfaat…

Salam JWD

Recomended Post

Satu Feedback dari pembaca

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  2. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  3. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  4. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  5. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  6. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  7. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  8. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  9. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  10. Menghitung Selisih Waktu Dengan PHP – Cara Termudah