CSS Button Hover Effect Generator
Design a button with a gradient, shadow and hover effect, such as a sliding fill or a lift, and watch it change as you adjust it. Copy the CSS and HTML when you're done.
1. Base Styling & Depth
Button Text
Gradient Colors (Start & End)
Text Color
Border Radius 8px
Shadow Offset X 0px
Shadow Offset Y 0px
Shadow Blur 0px
Shadow Color
2. Hover Effects & Transitions
Effect Type
Hover Fill/BG Color
Hover Text Color
Hover Scale / Zoom 1.05
Hover Shift Y-Axis -2px
Duration 0.3s
Easing