Button 3D
Chunky key-style button that presses in and springs back. Pro · 3D and motion › 3D buttons, shapes and text
A physical key: the face stands on a darker base and, when pressed by mouse, touch, Space or Enter, sinks onto it, then springs back up with the theme's spring. A real <button> — every native attribute, form submission and focus ring work as usual. The press moves only the face's translate; with reduced motion it changes at once. Optional pointer tilt for a playful hero or a game screen.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add button-3dnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { Button3D } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
variant | 'primary' | 'accent' | 'secondary' | 'danger' | 'primary' | Fill: the theme's primary or accent colour, a light secondary key, or a red one for destructive actions. |
size | 'sm' | 'md' | 'lg' | 'md' | Height, padding and text size. |
depth | number | 6 | How far the key stands up from its base, px: the press travels that far. |
leftIcon | ReactNode | Icon or element before the label. | |
rightIcon | ReactNode | Icon or element after the label. | |
tilt | boolean | false | The key also leans towards a mouse in 3D. |
Related components
- Switch 3D — Cube switch that rolls between “off” and a glowing “on”
- Shape Morph — Shapes morph into each other on a spring: circle, drop, star, flower
- Path Text — Text along a circle, arc or wave, rotating over time or with scroll
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
Previous: Word Prism · Next: Switch 3D · All 3D and motion