DarnlyCSS button generator
Pick a style, make it yours, and hover and click the real button on a light and a dark page. A badge tells you if the label is easy to read. Copy it as CSS, Tailwind, React or a shadcn variant.
Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome
This style has its own hover and press: it pops up on hover and pushes in when clicked.
Page colors for the preview
More free tools
See all 89 tools- Font finderSee what fonts any website uses, whether they’re free, and copy them into your project.
- Color palette from imageThe main colors of any screenshot or logo, as hex, CSS and Tailwind.
- Website color finderGet any website’s color palette and CSS color variables, ready for CSS, Tailwind or your AI agent.
How it works
- Pick a style: solid, outline, soft, gradient, 3D, glass or neo-brutal. Every style is shown in your color, so you can compare them at a glance.
- Change the color, corners, size, font, shadow and what happens on hover and press. Hover and click the big buttons to feel it, on a light and a dark page.
- Check the badge: it tells you if the label is easy to read. Then copy the CSS, the Tailwind classes, a React component, a shadcn variant, or a prompt for your AI agent.
Questions
Which should I copy: CSS, Tailwind, React or shadcn?
If your project has a tailwind.config file or uses Tailwind v4, copy Tailwind. If it has a components/ui/button.tsx file, it uses shadcn/ui: copy the shadcn variant and use <Button variant="brand">. Otherwise copy the CSS. Not sure? Copy the prompt and let your AI agent pick.
What does the contrast badge mean?
It compares the label color with the color right behind it, using the WCAG rule. 4.5:1 or more is easy to read for almost everyone. Below 3:1 many people struggle, especially on a phone in the sun. For more color pairs, use the contrast checker.
Why does the outline button fail on the dark page?
An outline button has no fill, so its label sits on the page itself. A dark color reads well on white but disappears on a dark page. Use a lighter color for dark mode, or a solid style.
Why does the prompt say to change only the main buttons?
If you just ask an agent to “make the button look like this”, it often restyles every button in the app. The prompt tells it to change the main call-to-action buttons only, and to ask you if it is not sure.
Do hover effects work on phones?
Phones have no hover, so the press effect is what people feel. That’s why every style has a press state. People who turn off animations in their settings get no movement, thanks to the reduced-motion rule in the code.
Is anything uploaded?
No. Everything runs in your browser. The share link keeps your settings in the address, nothing is saved on a server.