Button Effects — `.mv-button`

Seven effects for .mv-button via data-effect: orbiting spark, rainbow border, pulse, 3D key, sweeping shine, revealed arrow and glow.

Category	Primitives
Type	CSS only (`.mv-button`)
Status	stable
Also installs	button
Keywords	button, shimmer, rainbow, pulse, pushable, 3d, shine, arrow, glow, cta

When to use

A hero or pricing call to action must stand out with a shine, glow, rainbow border or orbiting spark
A tactile 3D key press or a revealed arrow adds character to a single primary action

Avoid when

Many buttons on the page or a dense app interface, where animated effects compete for attention → use Button instead

Install

node scripts/add.mjs button-effects --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["button-effects"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, components/button-effects/button-effects.css, components/button/button.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:2rem 1.5rem;width:100%;max-width:56rem;margin:auto;justify-items:center;align-items:center;text-align:center">
  <div style="display:grid;gap:.6rem;justify-items:center">
    <button class="mv-button" data-effect="shimmer" data-shape="pill" data-size="lg">Start free trial</button>
    <code style="font-size:.75rem;color:var(--mv-fg-muted)">shimmer</code>
  </div>
  <div style="display:grid;gap:.6rem;justify-items:center">
    <button class="mv-button" data-effect="rainbow" data-size="lg">Get access</button>
    <code style="font-size:.75rem;color:var(--mv-fg-muted)">rainbow</code>
  </div>
  <div style="display:grid;gap:.6rem;justify-items:center">
    <button class="mv-button" data-effect="pulse" data-size="lg">Join the livestream</button>
    <code style="font-size:.75rem;color:var(--mv-fg-muted)">pulse</code>
  </div>
  <div style="display:grid;gap:.6rem;justify-items:center">
    <button class="mv-button" data-effect="push" data-size="lg">Place order</button>
    <code style="font-size:.75rem;color:var(--mv-fg-muted)">push</code>
  </div>
  <div style="display:grid;gap:.6rem;justify-items:center">
    <button class="mv-button" data-effect="shine" data-size="lg">Download the app</button>
    <code style="font-size:.75rem;color:var(--mv-fg-muted)">shine (hover)</code>
  </div>
  <div style="display:grid;gap:.6rem;justify-items:center">
    <button class="mv-button" data-effect="arrow" data-variant="outline" data-shape="pill" data-size="lg"><span>Explore</span></button>
    <code style="font-size:.75rem;color:var(--mv-fg-muted)">arrow (hover)</code>
  </div>
  <div style="display:grid;gap:.6rem;justify-items:center">
    <button class="mv-button" data-effect="glow" data-size="lg">Publish</button>
    <code style="font-size:.75rem;color:var(--mv-fg-muted)">glow</code>
  </div>
  <div style="display:grid;gap:.6rem;justify-items:center">
    <button class="mv-button" data-effect="push" data-variant="outline" data-size="lg">Cancel</button>
    <code style="font-size:.75rem;color:var(--mv-fg-muted)">push + outline</code>
  </div>
</div>

API

Attributes

Name	Type	Description
`data-effect`	shimmer \| rainbow \| pulse \| push \| shine \| arrow \| glow	shimmer: dark fill with a conic spark orbiting the edge; rainbow: inverted fill with a moving rainbow border and glow; pulse: an expanding ring; push: 3D key (lifts on hover, sinks on press); shine: a light band on hover/focus; arrow: a dot floods the button, the label slides and an arrow appears (label inside a `<span>`); glow: colored halo that intensifies on hover. Combines with data-variant, data-size, data-shape.

CSS variables

Name	Default	Description
`--mv-button-shimmer-color / -bg / -size / -duration`	`white / violet ink / 1.5px / 3s`	Spark, background, glowing edge thickness, duration of one lap.
`--mv-button-rainbow / -fill / -duration`	`5 hues / var(--mv-fg) / 3s`	Gradient (loops: first = last color), fill, duration.
`--mv-button-pulse-color / -size / -duration`	`accent / 0.8rem / 1.8s`	Pulse ring.
`--mv-button-edge / --mv-button-lift`	`darkened fill / 4px`	Push: edge color and height.
`--mv-button-shine-color`	`white 50%`	Shine: highlight color.
`--mv-button-flood`	`accent`	Arrow: flood color.
`--mv-button-glow-color`	`accent`	Glow: halo color.

Accessibility

Stays a real <button> (focus, keyboard, disabled, aria-busy). Hover effects (shine, arrow) also trigger on keyboard focus. Under reduced motion, shimmer/rainbow/pulse stop and transitions become instant.