VertHoriz
Live preview
CSS output
Paste the CSS into your stylesheet and add class="my-button" to any button or link.
Frequently asked questions
How do I use the generated CSS?
Copy the CSS into your stylesheet, then add class=my-button to any button or link element. The hover rule is included when the darken option is on.
What does the shadow slider control?
The blur of a soft drop shadow under the button. Set it to zero for a flat button, or raise it for a floating look.
Will the preview match my website?
The preview shows the exact styles from the generated CSS, so what you see is what your button will look like with those values.
Preview
Related free tools
Free HEX RGB HSL Color Converter
Free color converter. Convert between HEX, RGB and HSL instantly, preview the color and co
Free Color Contrast Checker | WCAG Accessibility Tool
Free color contrast checker. Test text and background colors against WCAG AA and AAA stand
Free CSS Gradient Generator | Create Gradients Online
Free CSS gradient generator. Pick colors, adjust direction and stops, preview live, and co