Inar CSS Button Generator

Q: Why does my gradient hover look wrong?

Gradients cannot be transitioned in CSS. To fade a gradient hover smoothly, layer a second gradient with ::before and transition its opacity instead.

Q: Is the CSS Button Generator free?

Yes. It is completely free with no account and no usage limits.

What is a CSS Button Generator?

A visual designer that writes the CSS for you.

A CSS button generator lets you design a button by adjusting sliders, colors and toggles, then hands you the CSS and HTML you need. Instead of guessing at padding values, writing a box-shadow by hand, or hunting through old projects for that hover effect you liked, you shape it visually and copy the result.

This generator covers the properties that actually define how a button feels: typography, spacing, radius, background (solid, gradient or transparent), border, box-shadow, icons, loading states, and a proper hover state with a lift, a scale, a background shift or a shine sweep. It also generates the :focus-visible, :active and :disabled rules that make a button feel responsive and complete.

Every value updates the preview live, and the export panel produces clean, idiomatic output for five different targets — plain CSS, the HTML markup, an SCSS variable block, a Tailwind class string, and a small React component.

Inar CSS Button Generator runs entirely inside your browser. Your design is never uploaded and no third-party service is involved.

Anatomy of a Good Button

Three layers: shape, color and feedback.

Shape & Type

Padding controls how large the button feels. Font size, weight and letter spacing control how loud it reads. Radius controls how friendly or formal it feels. A pill (radius: 9999px) reads playful; a 2–6px radius reads functional; a 0px radius reads editorial or brutalist.

Color & Contrast

Background and text color are a pair, not a choice. A solid fill needs a text color that passes contrast at 4.5:1. A transparent button needs a border and a text color that reads against the page background — not just against white.

Features

Everything you need to design and ship a button.

Live preview

Every change renders immediately in the stage, with no rebuild step.

State preview

Toggle between Default, Hover, Active and Focus to see each state without a mouse.

40 presets

Design-system tiers (Material, Tailwind UI, Bootstrap, Carbon, Polaris), brand-style buttons (iOS, Stripe, Linear, Vercel, GitHub, Notion) and effect presets (glow, glass, neon, retro).

Full control

Typography, padding, radius, border, gradient, shadow, icons, loading state and transitions — all adjustable.

Five export formats

Plain CSS, HTML markup, an SCSS block, a Tailwind class string, and a React component.

Full state set

Emits :hover, :focus-visible, :active, and optional :disabled and .btn--loading rules.

Six backdrops

Preview on light, dark, grid, brand-tinted, gradient or photo backgrounds to check contrast.

Statistics

CSS size, contrast ratio of text on fill, box-model breakdown and an accessibility checklist.

Randomizer

Generate a plausible button in one click when you need inspiration.

Session persistence

Your design is saved to local storage between visits.

Download

Export the current format as a file, ready to drop into a project.

Privacy first

100% client-side. Your design never leaves your browser.

How to Use the Generator

Five steps from a blank canvas to a shipped button.

Load a preset or start blank
Open the Presets tab and click one of the forty starting points — Material Design, Tailwind UI, iOS, Stripe, Linear and more — or leave the defaults and shape the button yourself.
Adjust the shape
Use the Box & Border section to set padding, radius and border. Font size and weight live in the Typography section. Use the quick size row at the top to jump between sm/md/lg/xl/icon variants.
Pick colors and add an icon
Choose a background and a text color. Enable the Icon section to add an SVG icon left, right or above the label. Switch the backdrop to verify contrast on light and dark pages.
Add hover, focus and loading states
Enable hover and choose what changes: a darkened background, a small lift, a deeper shadow, a shine sweep or a scale. The States section adds optional :disabled and .btn--loading rules with a spinner.
Copy or download
Pick the export format you need — CSS, HTML, SCSS, Tailwind or JSX — and copy it to the clipboard. Download the file if you want to keep it.

Button Design Tips

Small decisions that make a button feel right.

One primary button per view

If every button is a filled brand color, none of them stands out. Use one filled primary for the main action, and let secondary actions be outline or ghost buttons.

Keep the hover subtle

A darkening of roughly 10–15%, a 2px lift, or a slightly deeper shadow is enough. Large scale changes or dramatic color shifts feel jumpy and can cause layout shifts in tight rows.

Frequently Asked Questions

Answers to the most common questions about CSS buttons.

How do I use the generated CSS?

Copy the CSS block into your stylesheet and the HTML snippet into your markup. The class name defaults to .btn — change it in the Content section to match your project's naming convention.

How do I add an icon to the button?

Enable the Icon section, pick one of the twelve built-in SVG icons, and choose its position (left, right or above the label). The generated HTML places the SVG inside the button and the CSS uses currentColor, so it inherits the text color automatically.

What is the loading state for?

The .btn--loading rule adds a small animated spinner via ::before and fades the label out. Toggle the class from JavaScript when an action is in progress: button.classList.add('is-loading') before the request, and remove when it resolves.

What does :focus-visible do?

It shows the focus ring only when the user is navigating with a keyboard, not when they click with a mouse. This keeps the button clean for mouse users while staying accessible for keyboard users.

Why does my gradient hover look wrong?

Gradients cannot be transitioned in CSS — a background change between two gradients jumps instead of animating. To fade a gradient hover smoothly, layer a second gradient with ::before and transition its opacity instead.

How do I add a "shine" effect?

Enable Shine sweep on hover in the Effects section. The generated CSS uses a ::before pseudo-element with a diagonal gradient that translates across the button on hover. It only needs one extra line of markup — nothing on the HTML side.

What radius should I use?

Match your design system. Common choices are 0 (sharp), 4–6px (functional), 8–12px (friendly, the modern default), and 9999px (pill). If your other UI uses 8px corners, a button with 24px corners will feel out of place.

How do I make the button full width?

Toggle "Full width" in the Advanced section. The generator will set width: 100% and the button will fill its container. On mobile, a full-width primary action is often the right choice.

Can I use the Tailwind output directly?

Yes. The Tailwind tab produces a single class string you can paste into a className attribute. It covers the same properties as the CSS output, though custom shadows and complex gradients may need an arbitrary value syntax such as shadow-[0_6px_18px_-6px_rgba(201,133,42,.55)].

What contrast ratio does my button need?

For normal-size text, WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 between the text and the background it sits on. The Statistics tab shows the exact ratio for your button's text against its fill.

Is the CSS Button Generator free?

Yes. It is completely free to use, with no account, no sign-up and no usage limits.

More free, privacy-friendly tools from Inar Learn — built for developers and designers.

InarLearnLearn without limits

InarLearnLearn without limits

CSS Tools