WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सीएसएस लिक्विड ग्लास बटन होवर प्रभाव
611
wecodeit
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
0
अनुशंसित
7 November 2024
सीएसएस रिबन
28 January 2025
बटन
9 September 2023
सीएसएस बटन होवर इफेक्ट
HTML
Copy
<div class="wrapper"> <div class="liquid-glass-button"> <div class="inner"> Hover me </div> </div> </div>
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) */
