EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

CSS button generator

Start from a ready-made style and adjust color, size, corners and shadow. Hover and click the preview to see the effects, then copy the code.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

Beautiful CSS buttons

Available in: PortuguêsEnglish

Advertisement

CSS button generator: what it is for

Choose a ready-made style (solid, pill, outline, gradient or square) and adjust the text, colors, font size, padding, corners, shadow, font weight and the hover effect (lift, darken or grow). The preview really works: hover and click it.

The CSS includes a visible focus state for keyboards, hover effects only on devices with a mouse and a slight shrink on click. The tool shows the contrast between text and background and warns you when it falls below 4.5:1.

How to use

  1. Choose a ready-made style.
  2. Adjust colors, size, corners, shadow and effect.
  3. Check the contrast and copy the CSS and HTML.

When to use it

  • Call to action buttons on landing pages.
  • Standardizing a site's buttons.
  • Learning CSS by seeing the result.

Frequently asked questions

Is the button accessible?

The code uses the button tag (or a), keeps the focus outline visible with :focus-visible and the tool warns you when the contrast between text and background falls below 4.5:1, the WCAG minimum for normal text.

Why does the hover effect only show on desktop?

The hover is inside @media (hover: hover), because on phones a tap triggers a fake hover that gets stuck on the button. The click effect (:active) works on every device.

Can I use the code on a link?

Yes. Replace <button> with <a href="..."> and keep the class; the CSS already includes display:inline-flex and text-decoration:none for both cases.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools

Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →

The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.