Cara Membuat Efek Hover Pada Link Anchor Dengan HTML CSS

Pada kesempatan ini saya akan memberikan trik tentang CSS yaitu Membuat Efek Hover Pada Link Anchor Dengan HTML CSS. Jadi efek hover yang akan dibuat yaitu dimana terdapat tag <a> atau link anchor maka akan tampil background. Bagaimana kalau langsung saja kita membuatnya yuk mari ikuti langkah-langkahnya:

Pertama

Sahabat silahkan membuat file HTML yang berisi code berikut :

<div class="box">
		<p>UI atau <a href="" class="anchor">User Interface</a> adalah ilmu tentang tata letak grafis suatu web atau aplikasi. Cakupan UI adalah tombol yang akan diklik oleh pengguna, teks, gambar, text entry fields, dan semua item yang berinteraksi dengan pengguna.</p>
		<p>Definisi UX atau <a href="" class="anchor">User Experience</a> menurut Borrys Hasian ada bermacam-macam. Berdasarkan apa yang dikerjakan, desainer UX adalah orang yang membuat produk yang bermanfaat dan memvisualisasi user flow menjadi desain produk yang teruji dan indah.</p>
	</div>

diatas terdapat 2 buah link anchor yang nanti akan diberikan efek hover, kemudian selanjutnya yaitu:

Kedua

Setelah mengetikan paragrap diatas kita berikan style CSS untuk menampilkan efek hover dengan code seperti dibawah ini:

*{margin:0;padding:0;}
		body{box-sizing: border-box;}
		.box{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;			
		}
		a{cursor: default;}
		.box p{
			padding: 25px;
			max-width: 760px;
			font-size: 28px;
			font-weight: 500;
			line-height: 2;
		}
		.box .anchor{
			position: relative;
			text-decoration: none;
			display: inline-block;
			color:#123;
			padding: 0 1px;
			transition: color ease 0.3s;
		}
		.box .anchor::after{
			position: absolute;
			content: "";
			z-index: -1;
			width: 100%;
			height: 10%;
			bottom: 5px;
			left: 0;
			background: linear-gradient(to right, #fd5292, #f7ff05);
			transition: all ease 0.3s;
		}
		.anchor:hover{
			color:#1d0aff;
		}
		.anchor:hover::after{height: 75%;}

Jika sudah langsung disimpan dan lihat pada browser masing-masing, jika benar maka pada teks yang diberikan tag <a> atau link anchor akan terlihat efek hovernya.

saya kira cukup dalam pembahasan artikel ini, semoga bermanfaat dan sampai jumpa.

terima kasih

The post Cara Membuat Efek Hover Pada Link Anchor Dengan HTML CSS appeared first on Kursus Website Terbaik.