Buttons

Welcome. This is Buttons, but if you were looking for Tons of butts is here.

Theme

Button preview

Drag the button to position it anywhere within the canvas. Use the arrow keys for precise movement, hold Shift for larger steps, or press Home to recenter it. Scroll over the canvas with a mouse or trackpad to zoom.

Button code and export

Create an accessible button component with these exact visual settings:
- Label: "Button"
- Fill: oklch(1 0 0)
- Stroke: 1px oklch(0.9219 0 0)
- Corners: 14px radius
- Padding: 14px vertical and 28px horizontal
- Type: Manrope, 500 normal, 18px, oklch(0.2046 0 0)
- Icon: lucide:arrow-right from Lucide, 18px, oklch(0.2046 0 0), on the right, with a 8px gap
- Shadow: 0px 8px 24px rgba(0, 0, 0, 0.14)

Use semantic button markup, preserve keyboard focus states, and return reusable HTML and plain CSS first. If a framework is already present, adapt the same values without changing the design.

Export