Overview
Configure a production-style button across four variants (solid, glass, outline, gradient), three sizes, adjustable corner radius, and any accent color, then export it as plain HTML with CSS, Tailwind classes, or a React component. A clickable canvas previews the real interaction states.
How It Works
Pick a variant style and size, type the button label, drag the radius slider from 0 to 28 pixels, and choose the accent color with the picker. The canvas renders a live button you can actually click to feel the hover lift and press states. The export box offers three tabs: complete HTML with an inline style block, Tailwind utility markup, and a React TSX component. Copy whichever matches your project.
Step-by-Step Usage Guide
- Choose a variant: solid, glass, outline, or gradient.
- Set size, corner radius, label text, and accent color.
- Toggle the arrow icon for the variants that support it.
- Copy the HTML and CSS, Tailwind, or React tab into your project.
Technical Specifications & Standards
Each variant emits a complete, self-contained design in the HTML and CSS tab. Solid fills with the accent color, uses a brightness filter on hover, and lifts one pixel with a growing shadow. Outline is a 1.5-pixel accent border with a tinted wash on hover. Glass is a white-alpha surface with backdrop blur and scale feedback, designed for dark backgrounds. Gradient blends your accent into a fixed purple at 135 degrees, so the second stop is not configurable. Sizes map to concrete paddings and font sizes for small, medium, and large. The Tailwind and React tabs use arbitrary-value classes that interpolate your exact color and radius, such as bg-[#2563eb] and rounded-[12px], which requires a JIT-based Tailwind build rather than a fixed class whitelist. The icon toggle adds an arrow: in the solid and glass variants the exported markup includes an inline SVG arrow, and the React tab imports an icon from lucide-react, while outline and gradient exports omit the icon element. If you change the label or color, regenerate before copying.
Targeted Use Cases
- Producing a consistent call-to-action button for a landing page.
- Generating matching button variants for a design system starter kit.
- Getting a Tailwind class string with your exact brand color baked in.
- Feeling the interaction states on the canvas before committing to a style.
Notes & Gotchas
- Use the HTML and CSS tab when you want the complete artifact; the other tabs are leaner scaffolds.
- Remember Tailwind arbitrary values need a JIT build and will not appear in a precompiled stylesheet.
- Expect the gradient variant's second color to be fixed purple; edit the CSS to change it.
- Keep contrast in mind for pale accent colors; white label text assumes a mid-to-dark accent.
Frequently Asked Questions
Why does the gradient button have purple in it?
The gradient variant blends your chosen accent into a fixed purple as the second stop. If you want a different pairing, edit the gradient's second color stop in the exported CSS.
Why does my Tailwind build not render the color?
The exported classes use arbitrary values like bg-[#2563eb], which only work with Tailwind's JIT compiler. A build that scans class names will pick it up; a static whitelist will not.
Why is there no icon in my outline button export?
The icon markup is only emitted for the solid and glass variants, and the React export for solid imports it from lucide-react. Outline and gradient exports are icon-free; add an inline SVG yourself.
Is the live canvas the same as the exported code?
The canvas is a live rendering of the same design so you can click and feel the states. The HTML and CSS tab is the portable version; the Tailwind and React tabs are more abbreviated.