Computer >> Computer tutorials >  >> Programming >> CSS

How to create Custom Cursor using CSS


We can create a custom cursor image with extensions like .cur (for Internet Explorer), .gif and .png (for Chrome, Firefox, Safari) and apply it to an element using the CSS cursor property and setting it to a url and in addition a generic cursor value such as auto,default, pointer, etc.

Solution

Selector {
   cursor: url("/*path to custom cursor file*/"), generic cursor;
}

Example

Let’s see how to create custom cursor with an example −

<!DOCTYPE html>
<html>
<head>
<title>Custom Cursor Using CSS</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#tech1 {
   cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto;
}
#tech2 {
   cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Custom Cursor Using CSS</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body></html>

Output

Following is the output for the above code −

Hovering over ‘DBMS’ button −

How to create Custom Cursor using CSS

Hovering over ‘Python’ button −

How to create Custom Cursor using CSS