- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
Hovering over ‘Python’ button −
Updated on 07-Jan-2020 12:39:22
- Related Questions & Answers
- How to create a custom scrollbar with CSS?
- How to create custom checkboxes and radio buttons with CSS?
- How to create custom select boxes with CSS and JavaScript?
- How to create custom range sliders with CSS and JavaScript?
- How to create a canvas with progress cursor using FabricJS?
- How to create a canvas with text cursor using FabricJS?
- Changing the look of Cursor using CSS
- How to create a canvas with a crosshair cursor using FabricJS?
- How to create a canvas with not-allowed cursor using FabricJS?
- How to create a canvas with a wait cursor using FabricJS?
- How to create a canvas with a help cursor using FabricJS?
- Cursor property of CSS
- How to create custom color maps in Java using OpenCV?
- How to create a Custom Ratingbar in Android using Kotlin?
- Example of CSS Cursor Property
Advertisements