WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सीएसएस लिक्विड ग्लास बटन होवर प्रभाव
34
wecodeit
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
7 March 2025
सीएसएस त्रिकोणमिति के साथ अनंत कक्षा एनीमेशन
27 September 2025
सीएसएस लोडिंग एनिमेशन: मेमोरी फ्लो और रिफ्लेक्शन
19 March 2023
एचटीएमएल सीएसएस पेमेंट फॉर्म
HTML
Copy
Hover me
CSS
Copy
body { font-family: system-ui, sans-serif; margin: 0; padding: 0; } .wrapper { background-image: url("https://cdn.wallpapersafari.com/13/1/TXKglp.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center 50%; height: 100vh; align-content: center; justify-items: center; } .liquid-glass-button { cursor: pointer; font-size: 2rem; color: #fff; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2); border-radius: 2rem; will-change: transform; transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); &:hover { transform: scale(1.2); } .inner { border-radius: 2rem; backdrop-filter: blur(3px); padding: 1rem 2rem; box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.4), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.4); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */