🔘 CSS Button

Design a button by eye — pick colors, borders, spacing, and a hover effect — then copy the plain CSS straight into your project. Everything renders live, all computed locally in your browser.

Button text

Fill color Text color

Gradient end Gradient angle 135°

Border color Border style

Border width 0px Corner radius 8px

Padding X 24px Padding Y 12px

Font size 16px Font weight

Drop shadow Hover effect

CSS

How to Use This Tool

Adjust colors, borders, spacing, and the hover effect and watch the preview button update instantly. Switch the fill to "Gradient" for a two-color background with an adjustable angle. When it looks right, click "Copy CSS" and paste the rule straight into your stylesheet — rename .my-button to whatever class you're using.

Everything runs locally in your browser; nothing you design here is uploaded or saved.