WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सीएसएस लिक्विड ग्लास बटन होवर प्रभाव
285
durehager
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
10 July 2023
सीएसएस डार्क मोड टॉगल
27 November 2024
दराज प्रभाव
18 October 2025
इंद्रधनुष होवर बटन HTML उदाहरण
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) */