9 Mouse Effects CSS Tricks You Can Copy-Paste

Auto-plays · click a tile to jump to its section · all nine in one zip

• 01 Cursor shape morph
• 02 Magnetic pull button
• 03 Spotlight card reveal
• 04 3D tilt card
• 05 Drag-to-scroll gallery
• 06 Custom right-click menu
• 07 Text-selection highlight color
• 08 Scroll-progress cursor ring
• 09 Hover caption reveal grid

These nine aren't ranked by popularity — they follow the order a pointer actually meets them on a page: idle, then morphing over a link (01), pulled toward a button (02), sweeping light and tilt across cards (03 and 04), dragging the screen sideways (05), right-clicking for a menu (06), painting a selected sentence (07), filling a ring while reading down the page (08), and finally sweeping a grid of tiles (09).

01Cursor shape morph

Hovering a link grows the small dot cursor into a blue ring with an arrow inside; leaving shrinks it back to a dot. pointermove repositions the dot, and pointerenter/pointerleave swap its shape.

area.addEventListener('pointermove', function (e) {
  var r = area.getBoundingClientRect();
  cursor.style.transform =
    'translate(' + (e.clientX - r.left) + 'px,' +
    (e.clientY - r.top) + 'px)';
});
link.addEventListener('pointerenter', function () {
  cursor.classList.add('is-link');
});
link.addEventListener('pointerleave', function () {
  cursor.classList.remove('is-link');
});

02Magnetic pull button

Moving the cursor near the button pulls it slightly toward the pointer; moving away springs it back. The distance from the hit zone's center is multiplied by a strength factor (0.4) to get the translate value.

zone.addEventListener('pointermove', function (e) {
  var r = zone.getBoundingClientRect();
  var dx = e.clientX - (r.left + r.width / 2);
  var dy = e.clientY - (r.top + r.height / 2);
  btn.style.transform =
    'translate(' + dx * 0.4 + 'px,' + dy * 0.4 + 'px)';
});
zone.addEventListener('pointerleave', function () {
  btn.style.transform = '';
});

03Spotlight card reveal

Moving the cursor over the card drags a circular light with it, brightening the dim text wherever the light passes. mix-blend-mode: soft-light blends the light into the background, and screen brightens the text underneath.

card.addEventListener('pointermove', function (e) {
  var r = card.getBoundingClientRect();
  spot.style.transform =
    'translate(' + (e.clientX - r.left) + 'px,' +
    (e.clientY - r.top) + 'px)';
});
card.addEventListener('pointerleave', function () {
  spot.style.transform = '';
});

043D tilt card

The card tilts in 3D based on where the cursor sits over it, with a diagonal sheen sweeping alongside. The pointer's position is turned into a 0–1 ratio, then into rotateX/rotateY angles.

wrap.addEventListener('pointermove', function (e) {
  var r = wrap.getBoundingClientRect();
  var px = (e.clientX - r.left) / r.width;
  var py = (e.clientY - r.top) / r.height;
  var rx = (0.5 - py) * 6 * 2;
  var ry = (px - 0.5) * 6 * 2;
  card.style.transform =
    'perspective(600px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)';
});

05Drag-to-scroll gallery

Dragging the tiles as if grabbing them scrolls the gallery sideways, and it stops the moment you release. This moves the real scrollLeft, not a transform, so touch scrolling stays native and unbroken.

vp.addEventListener('pointerdown', function (e) {
  dragging = true;
  startX = e.clientX;
  startScroll = vp.scrollLeft;
  vp.setPointerCapture(e.pointerId);
});
vp.addEventListener('pointermove', function (e) {
  if (!dragging) return;
  vp.scrollLeft = startScroll - (e.clientX - startX);
});

06Custom right-click menu

Right-clicking the area shows a copy, edit, and delete icon menu popping up at the click point instead of the browser's default menu. The coordinates are clamped so the menu never spills past the area's edge.

pad.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  var r = pad.getBoundingClientRect();
  var x = Math.min(e.clientX - r.left, r.width - 132);
  var y = Math.min(e.clientY - r.top, r.height - 112);
  menu.style.left = x + 'px';
  menu.style.top = y + 'px';
  pad.classList.add('is-open');
});

07Text-selection highlight color

Dragging to select text paints it with a chosen highlighter color instead of browser blue, and a copy badge appears above it. The color is one ::selection rule, and the badge position comes from selectionchange.

::selection {
  background: #ff9ebb;
  color: #17141a;
}

document.addEventListener('selectionchange', function () {
  var sel = window.getSelection();
  if (sel.isCollapsed) return;
  var r = sel.getRangeAt(0).getBoundingClientRect();
  badge.style.left = r.left + r.width / 2 + 'px';
  badge.style.top = r.top - 28 + 'px';
  badge.classList.add('is-shown');
});

08Scroll-progress cursor ring

While scrolling inside, a small ring that follows the cursor fills up with progress, turning into a checkmark at the end. The ring's stroke-dashoffset shrinks by the scroll ratio.

box.addEventListener('scroll', function () {
  var max = box.scrollHeight - box.clientHeight;
  var pct = max > 0 ? box.scrollTop / max : 0;
  ring.style.setProperty('--dash', (94.2 * (1 - pct)).toFixed(1));
  box.classList.toggle('is-done', pct > 0.98);
});

09Hover caption reveal grid

Hovering a grid tile slides a white caption strip up from the bottom to reveal its label, and keyboard focus triggers the same reveal. No JS at all — just :hover and :focus-visible.

.hg-tile__cap {
  transform: translateY(100%);
  transition: transform .3s ease-out;
}
.hg-tile:hover .hg-tile__cap,
.hg-tile:focus-visible .hg-tile__cap { transform: translateY(0); }

Where do mouse effects css tricks break?

The first trap showed up in card 04, the 3D tilt. rotateX/rotateY only look tilted — they shouldn't force a layout recalc — but at a 320px width the rotated card's visible bounding box still counted toward the scroll area, and the page overflowed sideways. A 9-degree tilt still overflowed; only after dropping to 6 degrees and shrinking the card itself did the 320px render stop overflowing. The second trap was card 05, the drag gallery: faking a finger-drag with transform drifts out of sync with the real scroll position, so real dragging has to move scrollLeft directly. The third was card 06's right-click menu — without clamping the coordinates, the menu gets cut off past the pad's right or bottom edge.

Accessibility — when a custom cursor gets in the way

Cards 01, 03, and 08 follow the cursor itself, so every transition/animation on them turns off under prefers-reduced-motion: reduce. But the bigger issue isn't motion — it's the cursor itself. For low-vision users, or anyone using a switch or joystick instead of a trackpad, a small custom cursor can be harder to spot than the system one. Card 01's cursor dot disappears entirely under @media (hover: none), (pointer: coarse); card 08 swaps back to the system cursor there. Cards 02 and 04 have no separate cursor element to hide — they just drop the pointer-driven transition. Card 03 hides its spotlight too, but brightens the text so it stays readable without it. Card 05's drag gallery actually works better on touch, since native scrolling stays underneath it. Cards 06, 07, and 09 each pair their mouse-only gesture (right-click, drag-select, hover) with a keyboard or focus fallback (Escape, Tab, :focus-visible) so the same feature works without a mouse. The password for all nine files is c5gmgmdf, and once unzipped the vanilla and react folders let you compare the same nine behaviors side by side.

FAQ

Can mouse effects css be done with CSS alone?

Some of them, yes. Item 07's selection color and item 09's hover-caption grid run on ::selection and :hover alone. The rest need to read pointer coordinates, clicks, or scroll position, so a few lines of vanilla JS are unavoidable.

Does a custom cursor slow the page down?

Changing only transform on every pointermove skips layout recalculation, so it stays smooth on most pages. Still, cache getBoundingClientRect once for elements that don't resize instead of re-measuring it on every event.

Do these effects work on mobile?

Items 01, 02, 03, 04, and 08 assume a pointer, so they're hidden or given a fallback state in CSS on touch. Item 05's drag gallery and items 06, 07, and 09 were built to work naturally on touch as well.

Sources: MDN Pointer events, MDN prefers-reduced-motion · More: About, Hover interactions, Landing-page interactions