1001Ferramentas
Tools Categories Guides FAQ
About Contact Privacy Policy Terms of Use
🔘 Dev

CSS Button Generator

Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.

Preview (passe o mouse para ver hover)

CSS buttons without a framework

This tool writes plain CSS for a button — no Tailwind, no Bootstrap — including a :hover state with a smooth transition. The preview reflects every change to colour, padding, shadow and radius as you make it.

Start from a preset and adjust from there. Everything runs in the browser.

Create custom CSS buttons

Few elements show up as much in an interface as the button, and getting its look right (colour, spacing, corners, shadow, hover effect) shifts the feel of the whole site. With this generator you design the button visually and watch the result as you edit.

Adjust the colour, the text, the padding, the border-radius (rounded corners), the shadow and the hover behaviour, always with a real-time preview. Happy with it? One click copies the ready HTML and CSS to paste straight into your project.

It all runs in the browser, with nothing to install. It works both for someone who just wants a nice button quickly and for someone learning CSS who wants to see how each property changes the look.

Frequently asked questions

How do I make a gradient button? I cannot find the control.
Only through the gradient preset, the button labelled Gradiente. Gradient mode has no switch of its own: it turns on when you click that preset and off the moment you click any of the other four. While it is on, your background colour becomes a 135-degree linear-gradient between itself and a 30% darker version, and the hover state redoes the same maths from your darkening value. Every other control keeps working on top of it.
What does the hover slider actually do?
It darkens the background colour by a percentage, and with the shadow slider at zero that is the only thing the hover state changes. At the default 10%, each RGB channel is multiplied by 0.9, so the purple #7c3aed becomes rgb(112, 52, 213). Push the shadow above zero and hover also picks up a -1px translateY plus a larger, softer shadow, the classic lift on mouseover. Text and border colours stay put.
Does the copied CSS depend on Tailwind, Bootstrap or a reset?
It depends on nothing. You get a .btn-custom class with background, color, padding, font-size, border-radius, border, cursor and a 0.2s transition, plus the :hover block, alongside one line of HTML with special characters already escaped. The one thing you usually tweak afterwards is the typeface: no font-family is written, and buttons do not inherit page fonts on their own, so without a reset yours will render in the browser default.

Related Tools

🌈

CSS Gradient Generator

Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.
🎨

Mesh Gradient Generator

Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.
🟢

CSS Neumorphism Generator

Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.
🪟

CSS Glassmorphism Generator

Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.
🌑

CSS Box Shadow Generator

Create CSS box shadows with real-time preview. Configure multiple shadow layers, color, blur, spread and inset. Copy the CSS code.
🎯

CSS Specificity Calculator

Compute the specificity (a, b, c) of a CSS selector — IDs, classes/attributes/pseudo-classes, elements. Useful to understand why your rule is not applying. Everything in your browser.