← All CSS Chapters
LoOPCode Home
11. Transitions & Hover
Smooth hover effects — pro micro-interactions.
Is chapter me cover hoga:
transition
hover
transform
duration / easing
1. Hover transition
Instant jump mat do — 200ms transition pro feel deta hai.
<!DOCTYPE html> <html> <head> <style> .btn { display: inline-block; padding: 12px 24px; background: #0d9488; color: white; border-radius: 999px; font-weight: 600; border: none; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .btn:hover { background: #0f766e; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,148,136,0.35); } </style> </head> <body style="padding:40px"> <button class="btn">Hover me</button> </body> </html>
▶ Run Code
☐
Mark complete
← Responsive
Variables →