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. I’m using Divi in this example but it works with all WordPress themes.
⚡ Here is the blog post mentioned in the video:
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.
Shortcuts:
00:00 – Intro: Changing mouse cursor on hover in WordPress
00:58 – Changing mouse cursor for an existing class (for example a button)
02:54 – Changing mouse cursor with inline CSS
Here’s the complete list of CSS mouse cursors:
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: n-resize
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
⚡ Not using Divi yet? Find the latest discounts for both the annual license and the life-time license at:
⚡ DiviMundo.com is dedicated to spread knowledge about WordPress and the Divi theme. The vision is that everyone should be able to design beautiful websites without exhausting coding issues. Read more at
#wordpress #css #divi
source