Cara Membuat Custom Cursor Pada CSS

Pada artikel ini kita akan membahas tentang property cursor css. Jadi pada tampilan cursor akan kita custom dalam berbagai bentuk atau tipe cursor yang tampil. Sebagai contohnya saat kita melakukan drag dan drop tentu akan berbeda tipenya dengan saat kita tipe cursor mengetikkan text. Nah disini kita akan belajar tentang cara membuat custom cursor menggunakan css.

Baiklah langsung saja kita praktekan dalam membuatnya ikuti langkah-langkah berikut :

buat file html kemudian ketikkan seperti code dibawah ini

<div class="container">
		<div class="cursor c-auto">
			<p>Ini Cursor Auto</p>
		</div>
		<div class="cursor c-text">
			<p>Ini Cursor Text</p>
		</div>
		<div class="cursor c-resize">
			<p>Ini Cursor Resize</p>
			<table border="1">
				<tr>
					<td>ID</td>
					<td>Nama Lengkap</td>
				</tr>
				<tr>
					<td>20200101</td>
					<td>Januar Setya</td>
				</tr>
				<tr>
					<td>20200101</td>
					<td>Febry Inayah</td>
				</tr>
			</table>
		</div>
		<div class="cursor c-move">
			<p>Ini Cursor Move</p>
		</div>
		<div class="cursor c-img1">
			<p>Ini Cursor tipe arrow</p>
		</div>
		<div class="cursor c-img2">
			<p>Ini Cursor tipe arrow person</p>
		</div>
	</div>

jika sudah tambahkan style CSS seperti code dibawah ini:

.container{
			width: 900px;
			margin:auto;
		}
		.cursor{
			width: 250px;
			height: 250px;
			border:5px solid #f00;
			border-radius: 50%;
			float: left;
			margin:10px;
			font-size: 20px;
			position: relative;
		}
		.c-auto{
			background-color: #9fa2a3;
			cursor: auto;			
			position: absolute;
			top:75px;			
			left:150px;
			text-align: center;
		}
		.c-text{
			background-color: #00ffc3;
			cursor:text;
			position: absolute;
			top:75px;			
			left:450px;
			text-align: center;
		}
		.c-resize{
			background-color: #000000;
			cursor: n-resize;
			position: absolute;
			top:75px;			
			left:750px;
			text-align: center;
		}
		.c-move{
			background-color: gold;
			cursor: move;
			position: absolute;
			left: 150px;			
			bottom:250px;	
			text-align: center;		
		}
		.c-img1{
			background-color: #0628dc;
			cursor:url(Metalic.cur),auto;
			position: absolute;
			left: 450px;			
			bottom:250px;
			text-align: center;
		}
		.c-img2{
			background-color: #ff004885;
			cursor:url(aero.cur),move;
			position: absolute;
			left:750px;
			bottom:250px;
			text-align: center;
		}
		.cursor p{
			margin-top: 50px;
			font-weight: bold;
			color: #ffffff;
		}
		.c-resize p{
			margin-left: 25px;
		}
		.c-resize table{
			margin-left: 15px;
			color: #ffd700;
		}

jika sudah langsung simpan kemudian buka pada browser masing-masing dan langsung saja arahkan cursor ke setiap class-class yang dibuat sesuai dengan tipe cursornya.

Demikian pembahasan kali ini semoga bermanfaat dan sampai jumpa dengan artikel selanjutnya.

terima kasih.