context cursor

A cursor that takes the shape of the hovered element. Inspired by iPad Pointer.



Default Setup

Copy the module into your project. In order to make the cursor works — you need to add a data tag `data-ccursor` to the HTML element on which you want to use the cursor and run the function in your JS.

*.HTML <button data-ccursor>Button</button> *.JS contextCursor();


There are two basic effects — Morph (default) and Lift. If you want to use Lift effect just add it to the data-ccursor attribute.

*.HTML — DEFAULT PARALLAX <button data-ccursor>Button</button> *.HTML — LIFT <button data-ccursor=”lift”>Button</button>

Local settings

You can disable parallax and paddings effects only for certain elements if you add `noParallax` and `noPadding` to the `data-ccursor` attribute. You can combine these two props.

*.HTML — DEFAULT PARALLAX <button data-ccursor>Button</button> *.HTML — LIFT <button data-ccursor=”lift”>Button</button>

Global settings

Global settings are settings that will affect all target elements and the cursor itself. You can adjust — cursor size, cursor speed, parallax shift index on hover, and paddings on hover.

*.JS contextCursor({
  radius: 20, //will change the radius/size of the cursor
  transitionSpeed: 0.2, //To change thee cursor speed
  parallaxIndex: 16, //how vv cvv you want to shift elements
  hoverPadding: 6, //will change the cursor padding around target element

Change styles

Cursor styles are written as CSS variables in the root directory, so you can easily overwrite them. Also, you can change the cursor active style — hover event will add `c-cursor_active` class to the cursor.

  --main-cursor-clr: rgb(0, 0, 0, 0.2);
  --main-cursor-hover-clr: rgb(0, 0, 0, 0.07);
  --ghost-shadow: 0 7px 15px rgba(0, 0, 0, 0.14);

body {
  margin: 0;
  padding: 0;

.c-cursor {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 200px;
  background-color: var(--main-cursor-clr);