CSS Button Generator
NewDesign a button visually — colors, hover state, padding, border radius, shadow, and font size — then copy ready-to-use HTML and CSS.
Frequently Asked Questions
Does the generated button include a hover effect?
Yes — the generated CSS includes a :hover rule that swaps in the hover background color you chose, plus a subtle :active scale-down effect for visual click feedback, all with a smooth CSS transition.
Can I control the shadow style, or is it fixed?
You can choose between three shadow presets — None, Soft (a subtle small shadow), and Lifted (a larger, more dramatic shadow) — each generating a different box-shadow value in the output CSS.
What format does the padding field expect?
Enter two numbers separated by a space: vertical padding first, then horizontal padding, like "12 24" for 12px top/bottom and 24px left/right — matching the shorthand order CSS itself uses for two-value padding.
Is the output a real <button> element or a styled <div>?
It's a real <button class="wdtb-button"> element, which means it gets native keyboard focus, click, and form-submission behavior for free — no extra ARIA attributes or JavaScript needed to make it accessible.
Will the copied CSS work if I change the class name?
Yes, as long as you rename every selector consistently — the generated CSS only ever references the single .wdtb-button class, so a find-and-replace to your own class name is all that's needed.