ToolsHub
CSS Generators

CSS Button Generator

Create a button that looks finished in every state. Choose the style, colours, size and hover effect, try it in the live preview, and copy HTML and CSS that already include hover, active, focus and disabled styles.

  • Runs in your browser
  • No sign-up
  • Free to use

Label and colours

Shape and size

Effects

How to use CSS Button Generator

  1. Type the label and choose a style: solid, outline, ghost or gradient.
  2. Pick the colours, then adjust size, padding, corner radius and border.
  3. Choose a shadow and a hover effect, and hover over the preview to test it.
  4. Copy the CSS and the HTML snippet.

CSS Button Generator features

Four styles

Solid, outline, ghost and gradient buttons from the same controls.

All states included

Hover, active, keyboard focus and disabled rules are generated, not just the resting look.

Hover effects

Darken, lift with a coloured shadow, or a soft glow ring.

Contrast check

Warns when the label would be hard to read on the chosen background.

Real preview

The preview is an actual button styled by the generated code; hover and press it.

Accessible by default

A visible focus outline and a real button element in the HTML.

When to use CSS Button Generator

  • Styling call-to-action buttons for a landing page.
  • Defining primary and secondary button styles for a small site.
  • Getting a clean starting point to refine in your own style sheet.
  • Checking colour contrast for a brand colour used on buttons.

CSS Button Generator FAQ

Should I use a button or a link?

Use a button element for actions that do something on the page, such as submitting a form or opening a dialog, and a link for navigation to another address. Both can share the same CSS class. Using the right element gives keyboard and screen-reader users the behaviour they expect.

Why does the code include a focus-visible rule?

People who navigate with a keyboard need to see which control is selected. :focus-visible shows an outline for keyboard focus without showing it on mouse clicks. Removing focus outlines entirely is one of the most common accessibility mistakes.

What contrast should a button have?

Accessibility guidelines ask for a contrast ratio of at least 4.5 to 1 between normal-sized text and its background, and 3 to 1 for large or bold text. The generator calculates the ratio and warns you when a filled button falls below 4.5.

How large should a button be?

A touch target of at least 44 by 44 CSS pixels is comfortable on phones. With a 16-pixel font, vertical padding of about 12 pixels reaches that height. Generous horizontal padding makes a button look intentional and easier to hit.

How do I apply the style to a link?

Add the class to an a element: <a class="button" href="…">. Because the base rule uses inline-flex and sets its own colours, it works on links as well. Add text-decoration: none if your links are underlined by default.

Why is the transition on several properties and not on “all”?

Listing the properties that actually change avoids animating things you did not intend, such as layout changes, and is slightly cheaper for the browser.

CSS Gradient Generator Design a gradient by eye and take the CSS with you. Pick the type, add as many… CSS Box Shadow Generator Build the shadow you have in mind without guessing at numbers. Adjust offset… CSS Border Radius Generator Round corners exactly the way you want. Move one slider for all corners or set… CSS Animation Generator Pick an effect, tune its timing and copy ready-to-use keyframes. Fifteen common… CSS Loader Generator Make a loading indicator without images or JavaScript. Choose from six animated… Color Picker Choose a colour, type a code or sample one from an image, and get every format you…

What makes a good button

A button has to communicate three things at a glance: that it can be pressed, what will happen, and how important it is compared with its neighbours. Shape, colour and weight carry the first and third messages, the label carries the second. Solid buttons in the main brand colour are for the primary action of a view. Outline and ghost buttons step back visually and suit secondary actions, so that a row of buttons has a clear order of importance.

States are where many hand-written buttons fall short. A button that looks the same when hovered, pressed, focused and disabled gives no feedback. Each state answers a question from the user. Hover says “this is interactive”. Active says “your press registered”. Focus says “you are here” to someone using the keyboard. Disabled says “not available now”. The generated code covers all four, with a small downward movement on press and a visible outline on keyboard focus.

Colour needs a second look for readability. A light brand colour with white text can be attractive and nearly illegible. The contrast warning in the generator uses the same formula as the accessibility guidelines, so a button that passes here will pass an audit for its text contrast.

Finally, keep buttons consistent. A site needs only a few variants, typically primary, secondary and a quiet text-like one, with one size scale. Defining them once as classes, as the generated code does, and reusing them everywhere makes an interface feel coherent and keeps the style sheet small.

Other useful tools