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:

• color
• background-color
• border-color (dan sub properties nya)
• outline-color
• Warna untuk fill dan stroke

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:

• Sample Link 1
• Sample Link 2
• Sample Link 3
• Sample Link 4

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:

• Sample Link 1
• Sample Link 2
• Sample Link 3
• Sample Link 4

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