WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Liquid Glass Button Hover-Effekt
33
wecodeit
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
1 March 2025
HTML CSS Moderne Navigationsleiste
3 March 2025
Download-Button
1 October 2025
Portfolio-Website-Vorlage HTML CSS JavaScript
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) */