To add an interactive hover cursor in WordPress, install Ultimate Cursor, pick a shape cursor and turn on Interactive Hover (Pro). The cursor then grows, changes colour, glows, pulls toward links and buttons, and can show labels such as "View" or "Play" over elements you choose with a CSS selector. Free shape cursors already grow over links.
An interactive cursor is one of the few cursor effects that does a job: it tells the visitor what a click will do. This guide shows how to set one up and how to keep it useful.
What an interactive cursor can do
Ultimate Cursor Pro's Interactive Hover reacts when the pointer reaches a link, a button, a form field or any element matching your own CSS selector. It can:
| Behaviour | What the visitor sees | Good for |
|---|---|---|
| Scale | The cursor grows over the element | Any clickable area |
| Colour change | Background and text colours switch | Contrast on dark or image sections |
| Glow | A soft halo around the cursor | Calls to action |
| Magnetic pull | The cursor drifts toward the element's centre | Buttons and icon links |
| Labels | A word inside the cursor — "Open", "View", "Play" | Portfolio cards, videos, galleries |
| Blend modes | The cursor mixes with the content beneath | Bold, minimal designs |
You can see it working on the shape cursor demo.
In the free version, shape cursors already grow when they pass over links and buttons, so you get a basic hover reaction without upgrading.
Set it up
- Install Ultimate Cursor and the Pro add-on, then open Ultimate Cursor in your dashboard.
- Choose Shapes and pick a circle or ring. Simple shapes read best when they change size.
- Turn on Interactive Hover.
- Set the hover scale and speed. A scale of about 2–3× is noticeable without covering the element.
- Choose hover colours, and add a glow if the cursor needs to stand out against busy images.
- Turn on the magnetic pull for buttons.
- Add a label for the elements where it helps, then Save.
Target exactly the elements you want
Labels work best when they're specific. Add a class to the elements in your editor, then use it as the selector:
- Block editor: select the block → Advanced → Additional CSS class(es) →
cursor-view. - Elementor: select the widget or container → Advanced → CSS Classes →
cursor-view.
Then add .cursor-view as a custom selector in Interactive Hover with the label View. Repeat with .cursor-play and Play for video thumbnails.
With Pro you can also run several cursor configurations — for example a plain dot across the site and a labelled cursor only on your portfolio pages — and target them by page, CSS selector or HTML element.
Design tips
- One or two words. "View", "Open", "Play", "Drag". Anything longer won't fit and won't be read.
- Match the action. Use "Drag" only where something actually drags.
- Keep focus outlines. Keyboard visitors never see the cursor. Your theme's focus styles still need to be visible.
- Don't cover the content. A large opaque cursor hides the thing it's pointing at; use transparency or a blend mode.
- Test on dark and light sections. Set hover colours that work on both.
Where this pays off
- Portfolios and agencies — "View" over project cards makes a grid feel clickable.
- Video and podcast sites — "Play" over thumbnails.
- Stores — a magnetic pull on add-to-cart buttons draws the eye to the action.
- Landing pages — a glow on the main call to action.
Pricing
Interactive Hover is part of Ultimate Cursor Pro, which starts at $24.99 a year or $74.99 lifetime for one site and also adds several cursors, targeting, 20 more shapes, Circular Text and settings for every animated effect. See the Pro plans.
Want to compare options first? Read our round-up of WordPress custom cursor plugins, or start with how to change the mouse cursor in WordPress.