WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सीएसएस ग्रेडिएंट बटन
1685
securearray494
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
27 November 2024
बटन होवर
7 May 2023
प्योर सीएसएस वेव्स
21 June 2024
स्व-विनाश बटन
HTML
Copy
<!DOCTYPE html> <html lang="en"> <body> <button> <span class="text">Button</span> </button> </body> </html>
CSS
Copy
body{ display:flex; align-items:center; justify-content:center; height:100vh } button { display: flex; align-items: center; justify-content: center; padding: 20px; min-width: 140px; max-width: 100%; border: 0; border-radius: 8px; background-image: linear-gradient(144deg, #4caf50, #2196f3 50%, #ff9800); color: #fff; font-size: 18px; line-height: 1; box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px; cursor: pointer; transition: transform 0.3s, background-color 0.3s; user-select: none; white-space: nowrap; box-sizing: border-box; touch-action: manipulation; } button:hover { background-image: linear-gradient(144deg, #81c784, #64b5f6 50%, #ffcc
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
