Glossy Web Button Design
Shiny pill-shaped button with gradient fill, inner glow, and drop shadow for modern web UI interfaces.
Step 1: Button Shape
Create 160×44px rounded rectangle (22px radius). Fill with gradient #4a90d9 to #2a5a8a.
Step 2: Glossy Highlight
New layer clipped above. Draw white ellipse covering top half at 30% opacity.
Step 3: Inner Glow
Layer Style Inner Glow: white, Screen, Size 4px, Choke 50% for top edge shine.
Step 4: Drop Shadow
Drop Shadow: black, Distance 2px, Size 4px, Opacity 40%.
Step 5: Button Text
Add "Click Here" in white 14px bold sans-serif, centered vertically and horizontally.
Step 6: Hover State
Duplicate button. Lighten gradient 15%. Increase gloss opacity to 45%. Label "Hover".
Step 7: Pressed State
Darken gradient. Move gloss down 1px. Reduce shadow to Distance 1px. Label "Active".
That's it! You've completed this tutorial. Experiment with the techniques and share your results with the Designstacks community.