Typography & Buttons · Free generator

CSS Button Generator

Free · no sign-up Live preview · copy or download the CSS

A button people want to press: gradient fill, comfortable padding, rounded corners, a grounding shadow and a hover lift. Dial each in, hover the preview to test, copy the whole component.

Settings

Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 15 minCSS Borders & RadiusRadius — the pill decision.STEP 2 · 20 minCSS GradientsThe lit-surface fill.STEP 3 · 20 minCSS TransitionsThe hover lift, done smoothly.


  1. CSS Hover Effects GeneratorAnimation & Motion
  2. CSS Box Shadow GeneratorShadows & Effects
  3. CSS Gradient GeneratorBackgrounds & Color
  4. CSS Border Radius GeneratorShape & Layout
  5. CSS Cubic Bezier EditorAnimation & Motion
  6. CSS Layer Styles GeneratorShadows & Effects


How it works


A pressable button is four sensations agreeing: generous padding says "touch target", the gradient's slight diagonal implies a lit surface, the shadow grounds it, and the hover lift confirms interactivity before the click. Padding, not width, should size buttons — labels change, translations grow.


Two production notes: keep a visible :focus-visible outline for keyboard users, and animate only transform/shadow (never padding or width) so the hover stays 60fps — the reasoning is in the Performance lesson.


Run the code — try it yourself
Style the bare button into a brand CTA: gradient fill, pill radius, 13px/28px padding, shadow, and a hover lift with transition.


exercise.html — editable


Frequently asked questions
Why a gradient instead of flat color?
A 10–15% lightness shift across the fill reads as dimensionality without being noticed consciously. Flat works too — the tool's two colors can match.
Should buttons be 
Actions (submit, open, toggle) are 
How big is big enough?
Aim for a ≥44px tall touch target — roughly 12px vertical padding at 16px text.
Can I animate the gradient on hover?
Not directly; give the button background-size:150% and shift background-position on hover — the buttons on this site do exactly that.


Keep going
Buttons are the most-clicked pixels you'll ever ship — worth ten deliberate minutes here. Systematize the result with custom properties (--btn-bg, --btn-radius) and richer states from the Hover Effects generator.
CSSmatic is a non-profit project, made by developers for developers.