CSS Button Generator

This tool generates CSS code for styled buttons. Adjust each property visually and see changes in real time, then copy the CSS and HTML to use in your project.

Button Properties

• Background Color: The fill color of the button. Use a contrasting color against the text for readability
• Text Color: The color of the button label. Should have sufficient contrast ratio against the background
• Padding: Inner spacing between the text and the button edges. Controls the button's size
• Border Radius: Rounds the corners. Use small values for subtle rounding, large values for pill shapes
• Box Shadow: Adds depth. Offset, blur, and spread control the shadow's position and softness
• Hover State: The background and text colors when the user hovers over the button

Tips

• Keep button text short and action-oriented (e.g. "Sign Up", "Download", "Learn More")
• Ensure text and background colors have at least a 4.5:1 contrast ratio for accessibility
• Use consistent border radius throughout your design system
• Subtle shadows (low opacity, small blur) look more professional than heavy shadows
• Hover effects should provide clear visual feedback without being distracting

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.