Design a call-to-action button by choosing its colours, size, corner radius, border, shadow and hover effect. The tool writes the HTML and the CSS, including a hover style and a visible keyboard focus style, and tells you the contrast ratio between the text and the background. It has no preview pane, so read the settings as a recipe: change one thing, paste the code into your page and look.
People decide whether something is a button in a fraction of a second, from its shape, colour and spacing. A filled background with enough padding around the label, rounded corners and a slight shadow all say that it can be pressed. A flat piece of coloured text is easy to mistake for a link or a heading.
The label matters as much as the style. A verb that says what happens, such as Get the guide or Book a call, converts better than a vague Submit. Keep it to a few words so it fits on one line on a phone.
A hover effect is feedback: it tells the visitor that the pointer is over something live. Keep the change small and fast. A slightly darker fill is the safest choice, because it keeps the text readable. A lift effect works well for cards and primary buttons but can feel fussy on a row of small controls.
Touch screens have no hover, so never hide information in it. The focus style is the equivalent for keyboard users, and it must be visible against the page behind the button. The ring in the generated code uses the button colour with an offset gap so it stays visible even when the button sits on a similar colour.
The background colour is converted to hue, saturation and lightness. For the darken effect, 8 percentage points are taken off the lightness (and added for lighten), the hue and saturation stay as they are, and the result is converted back to a hex colour. A pure red of 100% saturation and 50% lightness becomes 42% lightness, which is the hex colour d60000.
It is the WCAG contrast ratio between the text and background colours: the lighter colour's relative luminance plus 0.05, divided by the darker one's plus 0.05. Black on white is 21 to 1, and the same colour on itself is 1 to 1.
The focus-visible rule only draws the ring when the browser thinks it helps, which is mainly for keyboard navigation. That keeps the button clean for mouse users while keeping the page usable without a mouse.
Yes. Type your own name; it is cleaned to lower-case letters, numbers, hyphens and underscores so it is always a valid class selector.
It adds a short 0.2 second fade between the normal and hover states so the change does not snap. Leave it off if your site already sets transitions on all buttons.
Related: CSS shadow generator, Colour contrast checker, Hex colour picker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.