Did you know that there are over 30 different cursors that you can customize by using the cursor CSS property? Here’s the complete list and how to apply it on your WordPress website.
The three most common cursors are the default arrow, the pointer and the text cursor. Just hover the bold words for a live preview. See the complete Cursor Cheat Sheet below for the complete list.
👉 Related post: How to replace the cursor with a custom image in WordPress
You can customize the cursor to improve the user experience. Some form plugins, for example, use old grey submit buttons with the default arrow cursor on hover. Why not style the button and swap to a pointer hand instead? And you could of course highlight an element with a crosshair or a question mark just because it’s fun.
1. Changing the cursor for an existing CSS class
In this example I’m going to change the mouse cursor from the the default arrow to the more adequate hand pointer when hovering a WPUF Post Form submission button.
- Go to Appearance » Customizer from your WordPress dashboard
- Expand the Additional CSS tab
- Find the class that you want to target by using for example the Chrome Inspector (watch the video for a step by step tutorial)
- In this example, the button class is .wpuf-submit-button so I’ll add the CSS snippet below to apply a hand pointer on hover:
.wpuf-submit-button { cursor:pointer; }
- Save and preview in frontend.
Troubleshooting: In some cases you might need to add !important to override the existing CSS. Only use this sledge hammer if the original snippet doesn’t work. Example:
.wpuf-submit-button { cursor:pointer !important; }
2. Changing the cursor with inline CSS
You can also change the cursor by adding inline CSS in your pagebuilder, for example Divi Builder, Gutenberg, Classic Editor or Elementor. Make sure that you edit the HTML code by using the Text tab and not the Visual tab.
HTML with inline CSS
Hover <a href="https://divimundo.com/" style="cursor:help;" >this link</a> to see a help cursor. <ol> <li style="cursor:grab;">This list item will display a grab cursor</li> <li style="cursor:progress">This list item will display a progress spinner</li> </ol> <div style="cursor:move">This entire DIV will display a move cursor.</div>
Live preview
Hover this link to see a help cursor.
- This list item will display a grab cursor
- This list item will display a progress spinner
CSS Cursor Cheat Sheet With Live Preview
Hover the boxes below for a live preview of the different cursors. I’ve highlighted the most common once.
cursor: alias
cursor: all-scroll
cursor: auto
cursor: cell
cursor: context-menu
cursor: col-resize
cursor: copy
cursor: crosshair
cursor: default
cursor: e-resize
cursor: ew-resize
cursor: grab
cursor: grabbing;
cursor: help
cursor: move
cursor: ne-resize
cursor: nesw-resize
cursor: ns-resize
cursor: nw-resize
cursor: nwse-resize
cursor: no-drop
cursor: none
cursor: not-allowed
cursor: pointer
cursor: progress
cursor: row-resize
cursor: s-resize
cursor: se-resize
cursor: sw-resize
cursor: text
cursor: wait
cursor: zoom-in
cursor: zoom-out
That’s all for today!
I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.
👉 Related post: How to replace the cursor with a custom image in WordPress
👉 Free course: Create a website from scratch with Divi
0 Comments