A free, animated 3D button for calls to action, tactile style. Every colour, text and motion setting is a runtime input.
Updated October 2026
The Extruded 3D Button is a 3D button with a tactile look, made for calls to action. It animates a spring press that sinks into its extrusion and bounces back, and a tap presses the button with a ripple and counts the presses. It also has keyframes you can edit in the ExodeUI timeline: an entrance and an ambient float.
These 23 inputs, plus the replay and tap triggers, can be set from the customizer above, from the ExodeUI studio, or from your code while the element runs.
| Input | What it changes | Type |
|---|---|---|
| label | Label | Text |
| caption | Caption | Text |
| topColor | Button face | Colour |
| sideColor | Button side | Colour |
| labelColor | Label colour | Colour |
| panelColor | Panel | Colour |
| inkColor | Caption colour | Colour |
| extrude | Extrusion depth | Number |
| bounce | Release bounce | Number |
| radius | Corner radius | Number |
| lift | Hover lift | Number |
| interactive | Mouse interaction | On/off |
| tilt | Hover tilt (deg, 0 = off) | Number |
| press | Press squish | Number |
| float | Extra idle float (px) | Number |
| speed | Animation speed | Number |
| intro | Entrance animation | On/off |
| introStyle | Extra entrance style | Choice |
| introDuration | Entrance duration (s) | Number |
| colorTween | Colour change fade (s) | Number |
| pageMode | Page background | Choice |
| pageTop | Page colour | Colour |
| pageBottom | Page gradient end | Colour |
npm i exodeui.ExodeUICanvas and pass your text, numbers and colours as inputs.import { ExodeUICanvas } from 'exodeui';
export function Extruded3DButtonElement({ data }) {
return (
<ExodeUICanvas
src="/ui-trends/files/immersive-3d/07-extruded-button.bexode"
autoPlay
style={{ width: 600, height: 400 }}
inputs={{
label: data.label,
caption: data.caption,
// every colour is an input too, for example a brand accent
...data.theme
}}
/>
);
}