Comment utiliser : 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.
Aussi recherché comme : button generator, css button styles, button hover effect css, gradient button css, css button maker, button css code, webflow button style.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer CSS Button Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Button Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.