Button Generator

Buttons are the most interactive element on the web. Every call to action — Subscribe, Buy, Submit, Download, Sign Up — is a button, and its visual design directly affects whether users click it. A well-styled button communicates its purpose through colour (primary actions in a brand colour, destructive actions in red, subtle actions in grey or outlined), its state through visual feedback (hover, focus, active, disabled), and its importance through size, weight, and spacing. Getting buttons right is not just a matter of aesthetics; it is a conversion optimisation task. Studies consistently show that button colour, size, and wording have measurable effects on click-through and completion rates. This tool breaks button styling into its constituent CSS properties and lets you adjust each one independently, with a live preview that shows the result immediately. Rather than bouncing between your code editor and browser — change a colour, save, refresh, squint, repeat — you can dial in the exact appearance in one session and copy the finished CSS. **Colours:** The background colour is the most prominent design decision. Brand colours are the default choice for primary buttons, but what about the hover state? A common pattern (and the default in this tool) is to darken the background slightly on hover — perhaps by 10-15% — which provides a clear visual signal that the button is interactive. The text colour must maintain sufficient contrast against the background for legibility (WCAG AA requires a 4.5:1 ratio for normal text — use this project's Contrast Checker tool to verify your colour choices). The border colour is independent of the background, allowing for outlined button designs where the border is the primary visual element and the background is transparent or matches the page. **Typography:** Font size and font weight together determine the button's visual weight and its position in the visual hierarchy. A 14 px normal-weight button says "secondary action" or "I am available if you need me"; a 20 px bold button says "this is the main thing you should do on this page." The text content itself — editable in the preview — is arguably more important than any visual property. "Buy Now" converts differently from "Purchase" — being able to edit the text in the preview lets you test wording alongside styling. **Spacing and shape:** Padding creates the clickable area — generous padding (12–24 px) makes a button easier to target on touch screens and communicates importance. The individual-side padding controls (top, right, bottom, left) let you create non-uniform padding, though for most buttons equal horizontal and vertical padding looks most balanced. Border radius controls the roundness: 0 px gives a sharp, technical, no-nonsense rectangular button; 4–8 px gives a soft, modern, friendly button; 50 px on a narrow button creates a pill shape. Border width controls whether the button has a visible outline (2+ px), a subtle outline (1 px), or no outline (0 px, where the border is effectively absent). **Shadows:** box-shadow is the quickest way to add depth and elevate a button above the page surface. A small offset (0 2px 4px) with a semi-transparent black colour creates a subtle lift; a larger offset with more blur creates a floating, call-to-action button. The spread parameter (rarely changed but included for completeness) expands or contracts the shadow in all directions. The tool lets you toggle the shadow on and off and adjust each parameter independently. **Hover state:** The hover pseudo-class (`.custom-button:hover`) is essential for interactive feedback. Without a hover state, a button looks static and unresponsive — users cannot tell whether it is clickable until they try clicking. The most common hover effect is a background colour shift (lighter or darker, depending on the design). Changing the text colour on hover is less common but can create striking effects (e.g., a filled button that inverts to become outlined on hover). The border colour can also shift on hover to increase the visible outline. This tool generates separate CSS blocks for the normal and hover states, so you can define any combination of these changes. **Cursor:** The `cursor` property tells the browser what mouse pointer to display. `pointer` (hand/finger) is the standard for clickable buttons. `default` (arrow) is appropriate for a button that looks interactive but has been disabled. `not-allowed` (circle-with-slash) is the standard for disabled-state buttons and should always be paired with a visual indicator of disabled state (reduced opacity, greyed-out colours). **Button width:** `auto` lets the button size to its content width (with padding). `width: 100%` (full-width) makes the button fill its container, which is useful for mobile layouts, form submit buttons, or any call to action that should span the full card or section width. The history of the `button` element is a story of progressive styling capabilities. In the early web, buttons were rendered by the operating system — a grey Windows 95-style button on Windows, a glossy Aqua button on Mac OS — and CSS had almost no control over their appearance. The `appearance: none` property (initially vendor-prefixed as `-webkit-appearance: none` and `-moz-appearance: none`) was the turning point: it told the browser to discard the native OS styling and render the button as a blank canvas that CSS could fully control. Today, stripping native button styles and rebuilding them with custom CSS is the standard practice, and tools like this one are used to design the result.