How To Create Custom Mouse Cursor with CSS
As the intermediary between users and your website, cursors play a crucial role in shaping the user experience. Well-designed custom cursors have become integral to contemporary UI/UX, offering a chance to guide users dynamically and create a memorable, immersive journey on your site. Custom cursors can cater to various user needs, such as students using projectors, individuals with mobility challenges, or younger demographics targeted by a brand. This tutorial explores custom cursors, demonstrating how to leverage CSS (and JavaScript) to craft engaging ones, providing your website with a distinctive touch. The key topics covered include:
- Overview of cursors in CSS
- Creating a custom cursor with CSS
- Changing a mouse cursor to a pointer
- Hiding a mouse cursor with CSS
- Creating a custom cursor with JavaScript
- Considering UX and browser compatibility for custom cursors
- Crafting a custom cursor with accessibility in mind
This tutorial assumes a basic understanding of HTML, CSS, and JavaScript.
Overview of cursors in CSS
Every day, we encounter custom cursors that enhance our interactive experiences. When you hover over buttons and the cursor transforms into a hand, or when it changes to a text cursor over text, these are examples of custom cursors. CSS offers predefined cursors for common tasks, indicating specific actions at the hovered location. The CSS cursor property lets you specify the type of cursor you want. Here are some examples:
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
How to create a custom cursor with CSS
Creating a custom cursor with CSS is a simple process. First, choose the image you want to use, either by designing one or selecting a suitable PNG from an icon library like FontAwesome. Then, use the CSS cursor property and point it to the image’s URL. To apply the custom cursor to the entire website, place the cursor property in the body tag of your HTML. However, you can also assign custom cursors to specific elements if needed.
Here’s an example:
body {
cursor: url(‘path-to-image.png’), auto;
}
In this example, ‘path-to-image.png’ is the URL of your custom cursor image, and ‘auto’ is a fallback descriptor. If the custom image is unavailable, users will see the regular cursor.
You can also provide multiple fallback cursors by adding their paths to the cursor property:
body {
cursor: url(‘path-to-image.png’), url(‘path-to-image-2.svg’), url(‘path-to-image-3.jpeg’), auto;
}
In this code, there are three fallback cursors, ensuring a suitable option even if one of the custom images cannot be loaded.
How to change a mouse cursor to a pointer
Let’s say you have a table and you want the mouse cursor to change to a pointer (hand icon) when a user hovers over a row. You can achieve this using the CSS cursor property. Here’s an example:
<style>
/* Style the table */
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}/* Style the table cells */
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}/* Style the table rows */
tr:hover {
cursor: pointer;
}
</style><table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Chicago</td>
</tr>
<tr>
<td>Bill</td>
<td>35</td>
<td>Los Angeles</td>
</tr>
</table>
In the provided code, the tr:hover selector is used to apply the cursor property to all table rows when the mouse hovers over them. The cursor property is set to pointer, changing the mouse cursor to a hand icon.
How to hide a mouse cursor with CSS
To hide the mouse cursor with CSS, you can use the cursor property and set its value to none. Here’s an example:
<style>
/* Style the body element */
body {
cursor: none;
}
</style><body>
<!– Your content goes here –>
</body>
This code will hide the mouse cursor throughout the entire webpage. If you only want to hide the mouse cursor for a specific element, you can apply the cursor property to that individual element instead of the body element.
Hiding the mouse cursor might be useful in various situations, such as creating a more immersive experience in games or interactive applications, reducing distractions in presentations or slideshows, or preventing accidental clicks in fullscreen video or media. However, it should be used carefully, as it could be confusing or disorienting for some users depending on the context.
How to create a custom cursor with JavaScript
Creating a custom cursor with JavaScript involves manipulating DOM elements. Essentially, we’ll create DOM elements that serve as our custom cursor, and then use JavaScript to manipulate them. As we move our cursor around, these custom elements will follow the cursor’s movement.
Instead of designing or downloading an image, we’ll use CSS to design an animated custom cursor. The cursor will consist of two elements—a large circle and a small one. We’ll create two div elements and give them class names:
<div class=”cursor small”></div>
<div class=”cursor big”></div>
Next, we’ll style the circles using CSS. The big circle will have a width and height of 50px each, forming a circle with a border radius of 50%. The small circle will be hollow with a border and border radius of 50%, and a width and height of 6px each. The default cursor is disabled using cursor: none to render the custom cursor in its place. The big circle is animated using @keyframes for a dynamic effect.
body {
background-color: #171717;
cursor: none;
height: 120vh;
}.small {
width: 6px;
height: 6px;
border: 2px solid #fff;
border-radius: 50%;
}.big {
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 20rem;
animation-name: stretch;
animation-duration: 2.0s;
animation-timing-function: ease-out;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
}@keyframes stretch {
0% {
opacity: 0.2;
background-color: green;
border-radius: 100%;
}
50% {
background-color: orange;
}
100% {
background-color: red;
}
}
To make the elements move with the mouse, we’ll use JavaScript. An event listener will track mouse movement, and as the mouse moves, the positionElement function will update the div elements’ positions accordingly.
const cursorSmall = document.querySelector(‘.small’);
const cursorBig = document.querySelector(‘.big’);const positionElement = (e) => {
const mouseY = e.clientY;
const mouseX = e.clientX;
cursorSmall.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
cursorBig.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
};window.addEventListener(‘mousemove’, positionElement);
This script selects the div elements and adds an event listener to the webpage for mouse movement. The positionElement function maps mouse coordinates to the selected div elements, moving them in response to mouse movements. The transform and translate3d properties are used for repositioning.
UX and browser compatibility when creating a custom cursor
When designing a custom cursor, it’s crucial to prioritize the user’s experience. Creating a cursor that accurately represents or enhances the essence of an element is essential. While custom cursors add a unique touch to your website, it’s important not to overcustomize, as this can frustrate and confuse users, complicating their experience.
Before implementing a custom cursor, consider its functionality. Will it work seamlessly on older browsers? Some outdated browsers lack support for advanced CSS and JavaScript features. Designing website elements around a custom cursor that relies on technologies beyond users’ browser capabilities can hinder their engagement with your site.
Creating a custom cursor with accessibility in mind
Custom cursors can be particularly beneficial for users with impaired mobility and other accessibility needs. For instance, individuals with low vision may require large and easily trackable mouse pointers, or pointers with distinct colors for better visibility against various backgrounds. Customized mouse pointers can even be programmed to invert colors on elements they hover over, aiding users in tracking and reading content on the screen.
For users with low vision who may struggle to keep track of the text cursor while typing, thickening the text cursor or caret can be helpful. Additionally, large cursors can enhance the experience for individuals with motor impairments, providing easier navigation and placement on screen elements compared to smaller cursors.
Conclusion
Throughout this tutorial, we explored various aspects of cursors in web development. We covered the default CSS cursors, creating custom cursors with CSS, implementing multiple cursors on a webpage, and utilizing animation with CSS and JavaScript to enhance the cursor experience. When implemented thoughtfully, custom cursors can captivate users, maintain engagement, and facilitate efficient navigation. If you have any additional thoughts or questions about crafting custom cursors with CSS, feel free to share them in the comments section.
