Como usar: CSS Button Generator
- Start from a preset: solid, outline, ghost, pill, gradient, 3D, glass or neo-brutalist.
- Change the colors (or a gradient), font size, padding, corner radius, border and shadow.
- Pick a hover effect and try every state in the preview — hover, press, and Tab for the focus ring.
- Copy the CSS and the HTML; rename the
.btnclass if you like.
Every state, accessible by default
- Hover gives a clear visual response with a short
transition. - Active (pressed) moves the button down slightly, so clicks feel physical.
- Focus-visible shows a strong outline only for keyboard users, so the button stays clean for mouse users but is never invisible to people who navigate with Tab.
prefers-reduced-motionturns the movement off for visitors who ask for less animation.
Check the text against the button color with the Contrast Checker — WCAG asks for at least 4.5:1 for normal text. Use a real <button> for actions and an <a> for navigation; the CSS works on both. Related: Box Shadow Generator, CSS Gradient Generator, CSS Hover Animation Generator.
Também pesquisado como: button generator, css button styles, button hover effect css, gradient button css, css button maker, button css code, webflow button style.
Ferramentas que combinam com: CSS Button Generator
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- Glassmorphism Generator — Design a frosted-glass card with live sliders and copy cross-browser CSS — with the -webkit-backdrop-filter prefix and a fallback for older browsers.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
- CSS Keyframes Generator — A visual editor for @keyframes.
Perguntas frequentes
How do I make a button hover effect in CSS?
Add a :hover rule that changes the background, shadow or position, and a transition on the button so the change animates. Pick a hover effect here to get the code.
Should I remove the focus outline on buttons?
No — keyboard users need it. Use :focus-visible, as this generator does, so the ring appears for keyboard navigation but not after mouse clicks.
How do I make a gradient button?
Tick Gradient background and choose two colors; the CSS uses linear-gradient as the background-image.
Does it work in Webflow?
Yes — paste the CSS into an Embed with a style tag (or your site’s custom code) and give your Webflow button the class btn, or copy the values into the Style panel.
Posso instalar o CSS Button Generator como um aplicativo da web e usá-lo offline?
Sim. O CSS Button Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.