InteractivityCursor
Yumma CSS 3.5 is live! 🎉

Cursor

Controls the cursor style when hovering over an element.

ClassStyle
c-autocursor: auto;
c-chcursor: crosshair;
c-crcursor: col-resize;
c-dcursor: default;
c-hcursor: help;
c-mcursor: move;
c-nacursor: not-allowed;
c-nercursor: ne-resize;
c-neswrcursor: nesw-resize;
c-nonecursor: none;
c-nrcursor: n-resize;
c-nwrcursor: nw-resize;
c-nwsercursor: nwse-resize;
c-pcursor: pointer;
c-prcursor: progress;
c-rscursor: row-resize;
c-sercursor: se-resize;
c-srcursor: s-resize;
c-swrcursor: sw-resize;
c-tcursor: text;
c-wcursor: wait;
c-wrcursor: w-resize;
c-zicursor: zoom-in;
c-zocursor: zoom-out;

Progress

Indicates that a task is in progress.

Try hovering over the buttons to see how the cursor transforms with your mouse.
<button class="c-pr bg-gray fw-600 px-4 py-2 tc-white rad-1">Sending</button>

Help

Indicates that the element provides helpful information.

Try hovering over the buttons to see how the cursor transforms with your mouse.
<button class="c-h bg-blue fw-600 px-6 py-2 tc-white rad-1">Help</button>

Not Allowed

Indicates that the requested action cannot be performed.

Try hovering over the buttons to see how the cursor transforms with your mouse.
<button class="c-na b-2 bg-red fw-600 px-6 py-2 tc-white rad-1">Stop</button>

Pointer

Indicates that the element is a interactive element that can be activated.

Try hovering over the buttons to see how the cursor transforms with your mouse.
<button class="c-p bg-black fw-600 px-6 py-2 tc-white rad-1">Buy</button>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:c-*, md:c-*, lg:c-*, and xxl:c-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:c-* utility to override elements and change their values when hovering over them.