Skip to content

Yumma CSS 3.0 — All new CLI, utilities, and more 🎉

Cursor

Controls the cursor style when hovering over an element.

Utility	Properties
Failed to load data. Please try again later.

Auto

Initial value

This example sets the cursor to auto, indicating that the cursor is in its default state.

Try hovering over the buttons to see how the cursor transforms with your mouse.

<button class="c-auto b-2 bc-indigo bg-indigo-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-indigo">
  Login
</button>

Help

This example sets the cursor to help, indicating that additional information is available.

Try hovering over the buttons to see how the cursor transforms with your mouse.

<button class="c-h b-2 bc-indigo bg-indigo-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-indigo">
  Help
</button>

Not Allowed

This example sets the cursor to not-allowed, indicating that the action is not permitted.

Try hovering over the buttons to see how the cursor transforms with your mouse.

<button class="c-na b-2 bc-red bg-red-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-red">
  Stop
</button>

Pointer

This example sets the cursor to pointer, indicating that the element is clickable.

Try hovering over the buttons to see how the cursor transforms with your mouse.

<button class="c-p b-2 bc-indigo bg-indigo-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-indigo">
  Buy
</button>

Progress

This example sets the cursor to progress, indicating that the application is performing some processing and the user should wait.

Try hovering over the buttons to see how the cursor transforms with your mouse.

<button class="c-pr b-2 bc-indigo bg-indigo-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-indigo">
  Wait
</button>

Conditional styles

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

Media modifier

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

<div class="c-p md:c-wait ..."></div>

Hover modifier

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

<div class="c-p h:c-wait ..."></div>