CSS Button Style Generator
Design a button's colours, padding, radius and shadow visually, with a hover preview.
Advertisement
About this tool
Generates a base style plus a :hover state and a subtle transition so the hover change animates smoothly.
It also adds a visible :focus-visible ring for keyboard users, a pressed state, and turns the movement off for people who prefer reduced motion. Below the options, the text contrast is checked against WCAG AA in both the normal and hover colours (4.5:1 for normal text), and the button’s height against the 24px minimum target size in WCAG 2.2; around 44px is more comfortable on a phone.