Cursor effects — StyloftCSS

Components/Cursor effects

Section-specific cursor changes

Move between these panels on a mouse device. Cursor shapes change as soon as you enter each section.

Live preview

Branded ring

A cyan target with a precise center point.

Precision area

A native crosshair cursor for precision interfaces.

Text area

The native text cursor. You can select this sample sentence.

Action appearance

A purple pointer shape. This panel is a cursor-style preview, not a clickable control.

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <section class="sl-cursor-zone sl-stack sl-cursor-ring">
    <h3 class="sl-text-xl">Branded ring</h3>
    <p>A cyan target with a precise center point.</p>
  </section>
  <section class="sl-cursor-zone sl-stack sl-cursor-precision">
    <h3 class="sl-text-xl">Precision area</h3>
    <p>A native crosshair cursor for precision interfaces.</p>
  </section>
  <section class="sl-cursor-zone sl-stack sl-cursor-text">
    <h3 class="sl-text-xl">Text area</h3>
    <p>The native text cursor. You can select this sample sentence.</p>
  </section>
  <section class="sl-cursor-zone sl-stack sl-cursor-action">
    <h3 class="sl-text-xl">Action appearance</h3>
    <p>
      A purple pointer shape. This panel is a cursor-style preview, not a clickable
      control.
    </p>
  </section>
</div>

HTML source · enable JavaScript for the playground21 lines · UTF-8

Pulsing cursor and hover glow

The cursor ring cycles through three sizes and the panel glow transitions on entry and exit. Reduced motion keeps both static. Cursor images switch discretely; they do not interpolate.

Live preview

Move your mouse into this section

The browser draws the cursor at the pointer position. No JavaScript tracking or hidden cursor is used.

View HTML / PlaygroundHTML source

example.htmlHTML

<section class="sl-cursor-zone sl-stack sl-cursor-ring sl-cursor-pulse sl-cursor-glow">
  <h3 class="sl-text-xl">Move your mouse into this section</h3>
  <p>
    The browser draws the cursor at the pointer position. No JavaScript tracking or
    hidden cursor is used.
  </p>
</section>

HTML source · enable JavaScript for the playground7 lines · UTF-8

Native grab cursor on a scroll rail

The grab cursor accompanies native touchpad, scrollbar, touch and keyboard scrolling. Mouse-drag scrolling is not implemented by CSS.

Live preview

One

Native scrolling remains available. Hold the mouse button to preview the grabbing cursor.

Two

Native scrolling remains available. Hold the mouse button to preview the grabbing cursor.

Three

Native scrolling remains available. Hold the mouse button to preview the grabbing cursor.

View HTML / PlaygroundHTML source

example.htmlHTML

<section class="sl-slider sl-slider--cards" aria-label="Cursor scroll examples">
  <div
    class="sl-slider__track sl-cursor-grab"
    tabindex="0"
    role="group"
    aria-label="Use arrow keys or a touchpad to scroll"
  >
    <article class="sl-slide sl-stack">
      <h3 class="sl-text-xl">One</h3>
      <p>
        Native scrolling remains available. Hold the mouse button to preview the
        grabbing cursor.
      </p>
    </article>
    <article class="sl-slide sl-stack">
      <h3 class="sl-text-xl">Two</h3>
      <p>
        Native scrolling remains available. Hold the mouse button to preview the
        grabbing cursor.
      </p>
    </article>
    <article class="sl-slide sl-stack">
      <h3 class="sl-text-xl">Three</h3>
      <p>
        Native scrolling remains available. Hold the mouse button to preview the
        grabbing cursor.
      </p>
    </article>
  </div>
</section>

HTML source · enable JavaScript for the playground30 lines · UTF-8

Site-wide cursor with native field states

Apply sl-cursor-site sl-cursor-pulse to your body for the site-wide effect. Links and buttons use an action cursor; text fields and disabled controls keep meaningful native shapes.

Live preview

Try every state

Move over the background, this real link, and the controls below.

Sample note

View HTML / PlaygroundHTML source

example.htmlHTML

<section class="sl-cursor-site sl-cursor-pulse sl-cursor-zone sl-stack">
  <h3 class="sl-text-xl">Try every state</h3>
  <p>
    Move over the background, this <a href="/light/components/">real link</a>, and the
    controls below.
  </p>
  <label class="sl-field"
    ><span class="sl-label">Sample note</span
    ><input class="sl-input" placeholder="Native text cursor"
  /></label>
  <div><button type="button" class="sl-btn" disabled>Disabled example</button></div>
</section>

HTML source · enable JavaScript for the playground12 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.