About this tool
Buttons are the most clicked element on the web, and the most underestimated. A button is not just a coloured rectangle with a label; it is a promise that something will happen when you click it, and its design tells the user whether that promise feels safe. A button that is too small, too pale or too vague gets ignored, while a clear, well-sized button with an honest label gets clicked. Getting buttons right is therefore one of the highest-leverage design skills on any website.
ButtonForge is a free CSS button generator that lets you design a button visually and copy the finished CSS. You adjust the background colour, text colour, padding, corner radius, font size and border, and the preview updates instantly. When the button looks right, you copy the CSS and paste it into your own stylesheet. There is no sign-up, no framework to install and no JavaScript required: the output is plain CSS that works in any project, from a hand-written page to a large application.
Colour is the first decision, and it should follow the button's job. Primary actions, such as Save or Buy now, deserve your site's strongest accent colour, while secondary actions, such as Cancel, should be quieter so they do not compete. ButtonForge lets you test combinations live, which matters because a colour that looks good on a swatch can fail on a real button: text must stay readable, and the contrast between text and background must pass accessibility standards. The generator shows you the button at real size, not as an abstract palette, so problems are visible immediately.
Size and padding decide whether a button feels easy or fiddly. On touch screens, a button should be at least 44 pixels tall, and generous horizontal padding makes the label breathe instead of crowding the edges. ButtonForge exposes padding as separate horizontal and vertical controls, so you can build a tall, friendly button for a mobile checkout or a compact button for a dense toolbar. The preview shows the button in context, with a heading and a paragraph nearby, so you can judge whether it belongs on a real page rather than floating in empty space.
Corner radius changes the personality of a button more than any other single setting. Sharp corners feel technical and precise, small radii feel modern and neutral, and fully rounded pill buttons feel friendly and casual. ButtonForge offers a radius slider from zero to fully pill-shaped, and the live preview makes the difference obvious in a way that numbers alone never do. Try the same button at 0, 8 and 999 pixels of radius and you will see three different brands, even though nothing else changed.
Hover and focus states are not decoration; they are feedback. A button should visibly respond when a mouse hovers over it and when a keyboard focuses it, so users always know what they are about to activate. ButtonForge generates a hover rule that darkens the background slightly, and the preview lets you test the effect before shipping. Keyboard users rely on the focus outline, so the generated CSS keeps a clear focus style rather than removing it, which is a common accessibility mistake in hand-written button styles.
Shadows and borders add depth, but they should be used with restraint. A soft shadow can lift a primary button off the page and draw the eye, while a heavy shadow can look dated and noisy. ButtonForge includes a simple shadow toggle and a border width control, so you can compare a flat button, a bordered outline button and a softly shadowed button side by side. The best choice usually depends on the surrounding design: flat buttons suit clean layouts, while shadowed buttons suit pages where the action must stand out from busy content.
Presets speed up the work when you need a sensible starting point rather than a blank canvas. ButtonForge includes presets for a primary action button, a soft pill button, an outline button and a danger button for destructive actions such as Delete. Each preset sets colour, radius and padding to proven values, and you can then adjust any setting to match your brand. Starting from a preset and tuning one or two values is faster than starting from scratch, and it keeps your buttons consistent across a project.
Consistency across a site matters because users learn what a button looks like on your first page and then trust that shape everywhere else. If Save is a rounded blue button on one page and a square green link on the next, users hesitate, and hesitation costs conversions. ButtonForge encourages a small set of button styles: one primary, one secondary and one danger style, reused everywhere. Generate each once, save the CSS, and your whole site will feel coherent even as it grows.
Accessibility is built into good button design, and it goes beyond colour contrast. The label should describe the action, such as Download report rather than Click here, so screen reader users understand the button out of context. Buttons should be real button elements, not styled links or divs, so keyboards and assistive technology can activate them correctly. ButtonForge outputs CSS for a button element and encourages descriptive labels, which together cover the two most common button accessibility failures on the modern web.
Performance is another reason to generate plain CSS instead of reaching for a component library. A few lines of CSS add almost nothing to a page's weight, while a whole UI framework can add hundreds of kilobytes for a button that could have been styled directly. ButtonForge output is a single class with a handful of properties, easy to read, easy to edit and easy to remove later. If you ever change your brand colours, you change one value and every button using that class updates at once.
Testing buttons in the real world means testing them on phones, with a mouse and with a keyboard, and ButtonForge makes the first step easy by showing a live preview you can actually click. Click the preview button and a small confirmation appears, which proves the preview behaves like a real button rather than a picture of one. From there, paste the CSS into your project, test it on a small screen, and ask a colleague to find the primary action in five seconds. If they can, your button is doing its job.
Start with the preset closest to your need, adjust the colour to your brand, set the radius to match your site's personality, and check the contrast before you copy. Save the CSS alongside your other component styles, and reuse the same class for every primary action on your site. Good buttons are not an accident: they are a small set of deliberate choices, tested live, and ButtonForge exists to make those choices quick, visible and repeatable for every project you build.
Buttons on dark backgrounds need the same care as buttons on light ones, with one extra check: a colour that passes contrast on white may fail on charcoal, and a shadow that lifts a button on a pale page may vanish entirely on a dark one. ButtonForge presets are designed for light pages, so if your site uses dark sections, test the generated button inside a dark container before shipping, and consider a lighter, more saturated accent for those sections. The principle never changes, whatever the background: the primary action must be the easiest thing to find, the label must say what happens, and the button must respond visibly to hover and focus.
Frequently asked questions
What does ButtonForge generate?
ButtonForge generates plain CSS for a single button class, including background, text colour, padding, radius, font size, border and a hover rule.
Can I use the CSS in any project?
Yes. The output is framework-free CSS that works in any website, whether hand-written or built with a framework.
What is a pill button?
A pill button has a very large corner radius, so its ends are fully rounded. It feels friendly and casual compared with a square button.
How do I make an outline button?
Use the outline preset, which sets a transparent background with a coloured border and coloured text, then adjust the colours to your brand.
Why does hover matter?
Hover feedback tells users the button is interactive and shows what they are about to activate, which builds confidence before clicking.
Is ButtonForge free?
Yes. ButtonForge is free with unlimited usage and no sign-up.