WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
होवर पर ग्रेडिएंट रंग
1336
ledoc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
23 November 2024
एनिमेटिंग होवर
16 November 2024
HTML ग्रेडिएंट कार्ड
15 May 2025
परिचय डीजे
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) */