Button Effects `.mv-button`

data-effect로 .mv-button에 적용하는 일곱 가지 효과: 궤도를 도는 스파크, 무지개 테두리, 펄스, 3D 키, 스쳐 지나가는 광택, 나타나는 화살표, 글로우.

카테고리	기본 요소
유형	CSS 전용 (`.mv-button`)
상태	안정
함께 설치되는 항목	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
The button should be pulled toward the cursor rather than restyled → use Magnetic instead
The action is destructive and needs a deliberate confirmation → use Hold Button instead

설치

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

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["button-effects"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, components/button/button.css, components/button-effects/button-effects.css.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<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	유형	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.