Modern flat design button set with primary, secondary, success, warning, and danger variants following Material Design color principles.

Step 1: Base Button Shape

Rounded rectangle 140×40px, 4px corner radius. No gradients — solid flat colors only.

Step 2: Primary Button

Fill #3b82f6 (blue). White text 14px medium weight. No shadows or bevels.

Step 3: Secondary Button

Fill transparent, 2px stroke #6b7280, gray text. Same dimensions as primary.

Step 4: Success and Warning

Green #22c55e for success. Orange #f59e0b for warning. Red #ef4444 for danger variant.

Step 5: Disabled State

Gray fill #d1d5db, text #9ca3af. Reduce opacity to 60% for disabled appearance.

Step 6: Icon Buttons

40×40px square variants with centered 20px icons for toolbar use.

Step 7: Export All States

Slice each button. Export PNG-24. Include 2x versions for retina displays.

That's it! You've completed this tutorial. Experiment with the techniques and share your results with the Designstacks community.