WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
होवर पर ग्रेडिएंट रंग
1066
ledoc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
18 April 2025
डेविड रोबेल - पूर्ण स्टैक डेवलपर पोर्टफोलियो
10 July 2025
CSS एनिमेटेड बटन होवर प्रभाव
30 September 2025
होवर प्रभाव के साथ CSS स्फीयर एनीमेशन
HTML
Copy
Hover me
Hover me
Hover me
Hover me
Hover me
CSS
Copy
.btn { margin: 10px; padding: 30px; text-align: center; text-transform: uppercase; transition: 0.5s; background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%; color: white; text-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0 0 20px #eee; border-radius: 10px; } .btn-1 { --c1: #f6d365; --c2: #fda085; } .btn-2 { --c1: #fbc2eb; --c2: #a6c1ee; } .btn-3 { --c1: #84fab0; --c2: #8fd3f4; } .btn-4 { --c1: #a1c4fd; --c2: #c2e9fb; } .btn-5 { --c1: #ffecd2; --c2: #fcb69f; } .btn:hover { --x: 100%; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */