Loading…
Loading…
Style a button — colours, padding, radius, border, shadow — with hover, focus and disabled states included, and a contrast check.
Also covers: Button CSS generator · Button maker
The CSS includes hover, pressed, keyboard-focus (focus-visible) and disabled states. Use it on a real <button> or <a> so it stays accessible.
Text contrast 6.61:1 (hover 5.22:1) — passes WCAG AA
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 12px 22px; font: 600 16px/1.2 system-ui, sans-serif; color: #111111; background: #ff6a2c; border: none; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.12); cursor: pointer; transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;} .button:hover { background: #e9560c;} .button:active { transform: translateY(1px);} .button:focus-visible { outline: 2px solid #ff6a2c; outline-offset: 3px;} .button:disabled { opacity: 0.5; cursor: not-allowed;}Colours, padding, font, corners, border, shadow and hover shade.
With hover, active, focus-visible and disabled states.
The CSS keeps a visible keyboard focus outline and the tool checks text contrast (normal and hover) against WCAG AA 4.5:1. Use it on a real <button> or <a>.
By shifting the background's lightness in OKLCH, so the hue doesn't drift.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.