CSS Button Generator
Designing the perfect button is more nuanced than it looks. A button is often the most interactive element on a page - the thing a user clicks to sign up, purchase, explore, or commit - and its visual design carries real weight. This generator gives you hands-on control over every CSS property that shapes a button's appearance and behaviour, from typeface and padding to gradients, shadows, and hover animations, all updating live so you can see the result as you build.
Whether you're prototyping a new design system, fine-tuning a single call-to-action, or just experimenting with what's possible in pure CSS, start by browsing the presets or hit Randomise for instant inspiration. When you're happy with the result, copy the generated CSS and drop it straight into your project - no dependencies, no frameworks, just clean CSS you own.
CSS Button Generator
Basic Properties
Colors & Background
Typography
Border & Shape
Spacing
Shadow & Effects
Hover & Animation
Additional
Quick Presets
Live Preview
About This Generator
How It Works
Every control in the left panel maps directly to one or more CSS properties. As you adjust a slider or pick a colour, the preview button updates in real time and the generated CSS block on the right stays in sync. When you're ready, hit Copy Code and paste the output directly into your stylesheet - the class is named .button so you can rename it to match your project's conventions.
Hover states are handled via a dynamically injected :hover rule, which is also included in the copied CSS. If you've enabled the ripple effect, the required JavaScript snippet is included automatically at the bottom of the copied output - just paste it into your page before the closing </body> tag and it will work immediately.
CSS Properties Covered
The generator covers the full range of visual button properties: background (solid, linear-gradient, radial-gradient), color, font-family, font-size, font-weight, letter-spacing, text-transform, border-radius, border-width, border-color, border-style, padding, width, height, box-shadow, text-shadow, backdrop-filter, opacity, cursor, display, user-select, and transition. Hover properties include background, color, and transform. The animation property is used for the optional pulse effect.
Shadows Explained
Box shadow and text shadow are each controlled independently with dedicated sliders for offset X, offset Y, blur radius, spread (box shadow only), colour, and opacity. The offset values accept negative numbers, which moves the shadow up or to the left. Spread expands or contracts the shadow beyond the blur - a negative spread with a large blur creates a soft focused glow, while a zero-blur, positive-spread shadow produces a hard outline effect. The inset toggle flips the box shadow inside the button, useful for pressed or recessed states.
Backdrop filter is a separate effect that operates on the content rendered behind the button rather than the button itself. It only has a visible result when the button background has some transparency - pair it with a low-opacity solid background colour to create the frosted glass look popularised by glassmorphism UI design.
Gradients & the Hover Flash Fix
CSS cannot smoothly transition between a gradient and a solid colour because gradients are treated as images, not colour values. If you set a gradient background and a solid hover background, the browser has no way to interpolate between the two types and snaps through a blank frame - producing a visible white flash. This generator solves that automatically: when your button uses a linear or radial gradient, the hover background is output as a single-colour gradient of the same type, so the browser can transition between them cleanly.
Presets & Randomise
The ten presets are fully-formed button designs, each setting every controllable property - not just colour. They range from the hard-edged yellow Brutalist style with its offset box shadow and zero border radius, to the Neon Glow preset which uses a near-black background with an electric green text and box shadow, to the Gold Leaf preset built around Playfair Display and a warm gradient. Each preset is intended as a complete starting point you can then customise.
The Randomise button generates a button entirely from scratch - background colour, gradient stops and direction, font family, weight, size, letter spacing, border radius, padding, shadow values, transition timing, and hover behaviour are all independently randomised within sensible ranges. Text colour is automatically calculated for legibility against whatever background is generated, and the hover text colour is similarly derived. Click it repeatedly to explore the full range of what CSS buttons can look like.
Browser Support
All properties used by this generator are supported in every modern browser. backdrop-filter has full support in Chrome, Edge, and Safari, and has been supported in Firefox since version 103. CSS gradients, box shadows, text shadows, and transitions are universally supported. The user-select property may require a -webkit- prefix in some older WebKit environments, though this is rarely needed for contemporary projects. The generated CSS does not include vendor prefixes - add them manually if you need to support legacy browsers.
Frequently Asked Questions
How do I create a CSS button with a hover effect?
Define your base button styles on the element or class, then add a :hover rule that overrides the properties you want to change - typically background, color, or transform.
Add a transition property to the base rule so the change animates smoothly rather than snapping instantly.
For example: transition: background 0.3s ease, transform 0.3s ease; on the button, and transform: translateY(-2px); on :hover produces a subtle lift effect.
Why does my button flash white when hovering over a gradient background?
CSS cannot smoothly transition between a gradient and a solid colour because gradients are treated as images rather than colour values, leaving the browser with nothing to interpolate between.
The fix is to make your hover background a gradient of the same type as your base - even if it is a single-colour gradient.
For example, if your button uses linear-gradient(135deg, #e91e63, #9c27b0), set the hover background to linear-gradient(135deg, #c2185b, #c2185b) instead of a plain #c2185b - the browser can now transition cleanly between two gradients.
How do I make a fully rounded pill-shaped CSS button?
Set border-radius to a value large enough to exceed half the button's height - a common shorthand is border-radius: 9999px; or border-radius: 50px;, both of which produce fully rounded ends regardless of the button's actual dimensions.
This works because the browser caps the radius at half the element's height when the specified value exceeds it.
How do I create a ghost or outline CSS button?
Set the button's background to transparent, add a border in your chosen colour and width, and set the color to match the border.
On :hover, swap to a solid background in the same colour and change the text colour to contrast against it.
For example: base styles of background: transparent; border: 2px solid #333; color: #333; and hover styles of background: #333; color: #fff; produce a clean ghost button that fills on hover.
How do I add a box shadow glow effect to a CSS button?
Use the box-shadow property with a spread value and a semi-transparent or coloured shadow - no offset needed for a glow.
For example: box-shadow: 0 0 16px 4px rgba(0, 255, 180, 0.5); produces a soft green glow around the button.
For an intensified glow on hover, add a stronger version to the :hover rule and use transition: box-shadow 0.3s ease; on the base button to animate it in.
Multiple comma-separated shadow values can be stacked to layer a tight inner glow on top of a softer outer one.
What is the difference between display: inline-block and display: inline-flex on a button?
inline-block makes the button sit inline with surrounding text while accepting width, height, and padding - the simplest option for a standalone button.
inline-flex does the same but also turns the button into a flex container, making it easy to perfectly centre an icon and label inside it using align-items: center; justify-content: center;.
Use inline-flex any time your button contains multiple child elements such as an icon alongside text, and inline-block when the button contains plain text only.
How do I make a CSS button that looks pressed or recessed when clicked?
Use an inset box shadow on the :active pseudo-class to simulate a pressed state.
On the base button, you might have a raised shadow like box-shadow: 0 4px 8px rgba(0,0,0,0.2);.
On :active, remove or reduce that shadow and add an inset one: box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);.
Pair this with a very slight downward translate - transform: translateY(2px); - to reinforce the physical press sensation.
How do I make a CSS button full width?
Set width: 100%; on the button. If the button uses display: inline-block or display: inline-flex, also set display: block; or display: flex; so it respects the full width of its container.
Alternatively, width: 100% combined with box-sizing: border-box; ensures padding does not cause the button to overflow its container.
How do I add a ripple click effect to a CSS button?
A true ripple effect - where a circle expands outward from the exact point of the click - requires a small amount of JavaScript to read the click coordinates and inject a temporary element at that position.
The visual animation itself is done in CSS using a @keyframes rule that scales and fades the ripple element.
Pure CSS alone cannot read mouse coordinates, so a fully accurate ripple is not achievable without JavaScript.
The generated CSS from this tool includes the required JavaScript snippet automatically when the ripple option is enabled - just paste it before your closing </body> tag.
How do I make an accessible CSS button?
Use a native <button> element rather than a styled <div> or <a> tag - it is keyboard focusable and announced correctly by screen readers without extra ARIA attributes.
Ensure sufficient colour contrast between the button text and background (a minimum ratio of 4.5:1 for normal text per WCAG AA).
Never remove the focus outline entirely - instead style it: :focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; } provides a clear keyboard focus indicator without affecting mouse users.
Always include meaningful button text or an aria-label if the button contains only an icon.
How do I use backdrop-filter on a CSS button?
backdrop-filter applies a visual effect - such as blur or brightness - to whatever is rendered behind the element.
For it to have any visible effect, the button's background must be partially transparent; a fully opaque background blocks the content behind it entirely.
Pair it with a low-opacity background colour, for example background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px);, to create the frosted glass look used in glassmorphism design.
It is supported in all modern browsers including Firefox 103+.