OneTaskBy Tim King · Updated
CSS Button Generator
Solid, Outline, Soft and Ghost Buttons
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Button Generator works
This CSS button generator builds a complete button style in one go: solid, outline, soft or ghost, in your colour, size and corner radius, with a hover effect. Copy the HTML and CSS, which already include focus, pressed and disabled states.
Buttons are the most clicked thing on a site, so they need to look clickable, react to the mouse and keyboard, and show clearly when they cannot be used. The preview shows your button next to a disabled copy so you can check both.
The four button styles
Solid fills the button with your colour and is best for the main action on a page. Outline draws only the border and fills in on hover, which suits a second action. Soft uses a light tint of your colour for quieter actions, and ghost shows only text until hovered, ideal for toolbars and cancel links.
States the CSS button generator handles
The hover rule uses :not(:disabled) so a disabled button never reacts. A pressed button nudges
down 1px with :active. Keyboard users get a clear outline from :focus-visible, which mouse
clicks do not trigger. Movement is switched off for visitors who ask for reduced motion.
FAQ
Should I use a button or a link?
Use a <button> when the click does something on the page, like opening a menu or submitting a
form. Use an <a href> when it goes to another page. The CSS works on both, so add
class="btn" to a link to make it look the same.
How do I check my button colour is readable?
Text on the button needs a contrast ratio of at least 4.5 to 1 against the fill. White on a mid to dark blue, green or purple usually passes; for yellow or light colours, choose dark text instead.
How big should a button be for touch screens?
Aim for a tap target of at least 44 by 44 pixels. The medium and large sizes meet that with a normal label; if you use small buttons on mobile, leave generous space between them.
Can I add an icon to the button?
Yes. Put an inline SVG or icon element inside the button next to the label. The button already uses flexbox with a small gap, so the icon lines up with the text and stays centred.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.
Magnetic Button
Build a button that is pulled toward the cursor as it approaches.
Box Shadow Generator
Stack several shadow layers for depth that looks real.
Border Radius Generator
Per-corner border-radius with shorthand and longhand output.
Copy To Clipboard Button Generator
Copy to clipboard button for code blocks, inputs or fixed text.