CSS Button Generator
Start from a preset, tune colors, radius, padding and hover state, then copy the full button CSS including :hover.
CSS generated is free to use — no attribution required.
How do you use the CSS button generator?
Start from a preset — gradient, glassmorphism, outline and the rest — then adjust padding, radius, colors and the hover state. The preview is a real button, so you can hover it and see the transition exactly as it will behave in a page. The generated CSS covers the base state and the hover state together.
What CSS properties make up a button?
A button is mostly six declarations: padding for the tap area, background, border or border-radius for the shape, color and font for the label, and cursor: pointer for the affordance.
Two more are worth setting explicitly on a real button element, because user agent styles get in the way: font: inherit, since buttons do not inherit page typography by default, and border: none when you are supplying your own background.
How do you style hover, focus and active states?
Three pseudo-classes cover the interaction: :hover while the pointer is over the button, :active while it is being pressed, and :focus-visible when it is focused in a way that deserves a visible indicator.
A press state that shifts the button down a pixel or darkens the background gives the control a physical quality that hover alone does not. Keep the change small — the point is feedback, not animation.
Why use :focus-visible instead of :focus?
:focus matches whenever the element has focus, including after a mouse click, which is why designers used to remove focus rings: they looked like a bug on click. Removing them breaks keyboard navigation entirely, leaving people who tab through a page with no idea where they are.
:focus-visible resolves the conflict by matching only when the browser judges a visible indicator is warranted, which in practice means keyboard focus rather than mouse clicks. Style :focus-visible, and never write outline: none without providing a replacement indicator.
How do you make an accessible button?
Use a real button element. A styled div gets none of the behavior for free — no keyboard activation, no role, no participation in tab order — and rebuilding all of that correctly with ARIA is far more work than restyling the native element.
Beyond the element, three things matter: the label must clear the contrast ratio against the button background, not the page background; the target should be large enough to hit comfortably on touch, which usually means padding rather than a fixed height; and the visible label should say what the button does.
How do you style a disabled button?
The :disabled pseudo-class styles it, typically with reduced opacity and cursor: not-allowed. The trap is contrast: dropping opacity to 0.5 also drops the label’s contrast ratio, and disabled controls still need to be readable enough to understand what is unavailable.
Prefer a deliberately chosen muted color pair over a blanket opacity, and remember that disabled buttons are not focusable, so a form that disables its submit button gives keyboard users nothing to land on and no explanation.
How do you add a gradient or glassmorphism button?
A gradient button is background: linear-gradient(135deg, #6366f1, #22d3ee) in place of a flat color. Because you cannot transition between two gradients directly, animate the effect by shifting background-position on an oversized gradient instead.
Glassmorphism needs a translucent background plus backdrop-filter: blur(12px), and it only reads as glass when there is something behind it to blur. A thin light border and a subtle inner highlight sell the effect.
How do you animate a button smoothly?
Transition only the properties that actually change, rather than transition: all, which forces the browser to watch every property and can produce surprising animations when an unrelated rule changes. Something like transition: background-color .2s ease, transform .12s ease is enough.
Prefer transform and opacity for movement, since they are handled by the compositor and do not trigger layout. Wrap non-essential motion in a prefers-reduced-motion query so people who have asked their system for less animation get a static button.
Should you use a button or a link?
A button performs an action on the current page; an anchor navigates to a URL. The visual style is irrelevant to that choice — a link can look like a button and often should.
The distinction is functional: links can be opened in a new tab, copied and bookmarked, and are announced as links by screen readers. Using an anchor with no href as a fake button removes it from keyboard navigation, and using a button for navigation loses everything a URL provides.
What is the browser compatibility for CSS buttons?
Everything here is broadly supported: border-radius, gradients, transitions, :hover, :active and :disabled have worked for many years. :focus-visible is supported across all current browsers. backdrop-filter, used for glassmorphism, arrived later and is worth guarding with a @supports query if the design depends on it.