Loona CSS Button Generator — Design Buttons, Get the Code
Buttons are the most-touched element of any site and the most fiddly to style by trial and error. Design yours here once; the hover colour is even derived for you.
How to use the CSS Button Generator
- Style the preview button: colours first, then size (padding and text), then corners and border.
- The hover shade is your background darkened by a fixed step — check it feels right by hovering the preview area in your own project.
- Copy the CSS and rename .my-button to your class.
How it works
The hover colour is computed by subtracting a fixed amount from each RGB channel of the background (clamped at black), a reliable "same hue, deeper" rule. Padding is split into vertical and horizontal values because great buttons are wider than they are tall.
Worked example
A charity site’s donate button moves from default blue to a big, gold-radius brand button — donations page finally matches the posters.
Frequently Asked Questions
Why is hover darker, not lighter?
Darkening on hover reads as "pressing down" under the same light — the convention users subconsciously expect.
Can I make a pill button?
Set corner radius to its maximum (40) with modest height — a full pill.
Can I make an outline (ghost) button?
Set a border width, then use the Box Shadow page trick: actually set background to your page colour and text to the brand colour — or simply swap the two colour values in the copied CSS.
Is the CSS framework-free?
Yes — plain CSS, works anywhere, no dependencies.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).