Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Buttons
Essentials

Buttons

Clear actions, comfortable targets, and visible keyboard focus.

CSS only11 examplesKeyboard friendly HTML

Try the 8 signature button effects ↓

Signature effects — hover or Tab to try

Eight different visual treatments. Focus a button to see the same effect with your keyboard. Reduced-motion preferences keep them static.

Live preview

01 / Split doors

Two panels part from the center.

02 / Orbit border

A cyan-purple border rotates around the edge.

03 / Text elevator

The label slides up to reveal a second line.

04 / Arrow runway

An angled arrow straightens and moves forward.

05 / Spotlight bloom

A circular color field expands from the corner.

06 / Diagonal wipe

A slanted panel sweeps across the button.

07 / Press depth

The raised face sinks into its shadow.

08 / Frame drawing

Four inset edges draw around the label.

View HTML / PlaygroundHTML source
example.htmlHTML
<div id="signature-buttons" class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack">
    <p class="sl-help">01 / Split doors</p>
    <div><button type="button" class="sl-btn sl-fx-doors">Split doors</button></div>
    <p class="sl-help">Two panels part from the center.</p>
  </article>
  <article class="sl-card sl-stack">
    <p class="sl-help">02 / Orbit border</p>
    <div><button type="button" class="sl-btn sl-fx-orbit">Orbit border</button></div>
    <p class="sl-help">A cyan-purple border rotates around the edge.</p>
  </article>
  <article class="sl-card sl-stack">
    <p class="sl-help">03 / Text elevator</p>
    <div>
      <button type="button" class="sl-btn sl-fx-swap" aria-label="Explore the library">
        <span class="sl-fx-label" aria-hidden="true"
          ><span>Explore library</span><span>Let's explore →</span></span
        >
      </button>
    </div>
    <p class="sl-help">The label slides up to reveal a second line.</p>
  </article>
  <article class="sl-card sl-stack">
    <p class="sl-help">04 / Arrow runway</p>
    <div>
      <button type="button" class="sl-btn sl-fx-runway">
        Launch <span class="sl-fx-arrow" aria-hidden="true">↗</span>
      </button>
    </div>
    <p class="sl-help">An angled arrow straightens and moves forward.</p>
  </article>
  <article class="sl-card sl-stack">
    <p class="sl-help">05 / Spotlight bloom</p>
    <div>
      <button type="button" class="sl-btn sl-fx-spotlight">Spotlight bloom</button>
    </div>
    <p class="sl-help">A circular color field expands from the corner.</p>
  </article>
  <article class="sl-card sl-stack">
    <p class="sl-help">06 / Diagonal wipe</p>
    <div>
      <button type="button" class="sl-btn sl-fx-diagonal">Diagonal wipe</button>
    </div>
    <p class="sl-help">A slanted panel sweeps across the button.</p>
  </article>
  <article class="sl-card sl-stack">
    <p class="sl-help">07 / Press depth</p>
    <div><button type="button" class="sl-btn sl-fx-depth">Press depth</button></div>
    <p class="sl-help">The raised face sinks into its shadow.</p>
  </article>
  <article class="sl-card sl-stack">
    <p class="sl-help">08 / Frame drawing</p>
    <div><button type="button" class="sl-btn sl-fx-frame">Frame drawing</button></div>
    <p class="sl-help">Four inset edges draw around the label.</p>
  </article>
</div>
HTML source · enable JavaScript for the playground56 lines · UTF-8

Signature effects: disabled states

Disabled buttons retain their visual style without running hover effects. These are presentation examples.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster">
  <button type="button" class="sl-btn sl-fx-doors" disabled>Split doors disabled</button
  ><button type="button" class="sl-btn sl-fx-orbit" disabled>Orbit disabled</button
  ><button type="button" class="sl-btn sl-fx-depth" disabled>Depth disabled</button>
</div>
HTML source · enable JavaScript for the playground5 lines · UTF-8

Everyday actions

Use buttons for actions and anchors for navigation. Outline is a modifier on sl-btn.

Live preview
Read the guide ↗
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <button class="sl-btn" type="button">Primary action</button>
  <button class="sl-btn sl-btn--outline" type="button">Secondary action</button>
  <button class="sl-btn" type="button" disabled>Unavailable</button>
  <a class="sl-btn" href="/light/getting-started/">Read the guide ↗</a>
</div>
HTML source · enable JavaScript for the playground6 lines · UTF-8

An action in context

Give the primary action a clear destination. This is a static example, not a checkout.

Live preview
Your next step

Make a little room.

Start with a small CSS foundation, then add your own ideas.

Get started →
View HTML / PlaygroundHTML source
example.htmlHTML
<article class="sl-card sl-stack demo-narrow">
  <span class="sl-badge">Your next step</span>
  <h3 class="sl-text-xl">Make a little room.</h3>
  <p class="sl-text-muted">
    Start with a small CSS foundation, then add your own ideas.
  </p>
  <a class="sl-btn sl-w-full" href="/light/getting-started/">Get started →</a>
</article>
HTML source · enable JavaScript for the playground8 lines · UTF-8

Small, medium, and large

Explicit size modifiers. Medium is the standard 44px minimum height; compact controls are 36px.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <button type="button" class="sl-btn sl-btn--sm">Small</button
  ><button type="button" class="sl-btn sl-btn--md">Medium</button
  ><button type="button" class="sl-btn sl-btn--lg">Large</button>
</div>
HTML source · enable JavaScript for the playground5 lines · UTF-8

Fill, outline, ghost, and soft

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <button type="button" class="sl-btn sl-btn--fill">Fill button</button
  ><button type="button" class="sl-btn sl-btn--outline">Outline button</button
  ><button type="button" class="sl-btn sl-btn--ghost">Ghost button</button
  ><button type="button" class="sl-btn sl-btn--soft">Soft button</button>
</div>
HTML source · enable JavaScript for the playground6 lines · UTF-8

With icons and without

Decorative SVGs are hidden from assistive technology; icon-only actions have a name.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <button type="button" class="sl-btn">
    Continue
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" />
    </svg></button
  ><button type="button" class="sl-btn sl-btn--outline">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="m12 3 3 6 6 1-4.5 4.5 1 6L12 18l-5.5 2.5 1-6L3 10l6-1 3-6Z" />
    </svg>
    Save example</button
  ><button type="button" class="sl-btn">Text only</button
  ><button type="button" aria-label="Save this example" class="sl-btn sl-btn--icon">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="m12 3 3 6 6 1-4.5 4.5 1 6L12 18l-5.5 2.5 1-6L3 10l6-1 3-6Z" />
    </svg>
  </button>
</div>
HTML source · enable JavaScript for the playground36 lines · UTF-8

Pill and full-width actions

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-stack demo-narrow">
  <button type="button" class="sl-btn sl-btn--pill sl-w-full">
    A rounded full-width action
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" />
    </svg></button
  ><button type="button" class="sl-btn sl-btn--outline sl-w-full">
    A secondary full-width action
  </button>
</div>
HTML source · enable JavaScript for the playground16 lines · UTF-8

Animated hover collection

Reusable motion module: lift, glow, tilt, zoom and sheen. Each has an entry and exit transition.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <button type="button" class="sl-btn sl-hover-lift">
    Lift
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" />
    </svg></button
  ><button type="button" class="sl-btn sl-hover-glow">
    Glow
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" />
    </svg></button
  ><button type="button" class="sl-btn sl-hover-tilt">
    Tilt
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" />
    </svg></button
  ><button type="button" class="sl-btn sl-hover-zoom">
    Zoom
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" />
    </svg></button
  ><button type="button" class="sl-btn sl-hover-sheen">
    Sheen
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" />
    </svg>
  </button>
</div>
HTML source · enable JavaScript for the playground58 lines · UTF-8

Fill from below

The fill grows smoothly under the text; keyboard focus gets the same treatment.

Live preview
Explore the library
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <button type="button" class="sl-btn sl-hover-fill">
    Hover to fill
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" />
    </svg></button
  ><a href="/light/components/" class="sl-btn sl-hover-fill sl-btn--pill"
    >Explore the library</a
  >
</div>
HTML source · enable JavaScript for the playground16 lines · UTF-8

Disabled and busy states

Illustrative states. Your application owns actual loading and completion.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <button type="button" class="sl-btn" disabled>Unavailable</button
  ><button type="button" class="sl-btn" disabled aria-busy="true">
    <span class="sl-spinner" aria-hidden="true"></span> Loading example</button
  ><button type="button" class="sl-btn sl-btn--outline" disabled>
    Outline disabled
  </button>
</div>
HTML source · enable JavaScript for the playground8 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.