Liquid Fill Button
Home
Snippets
Liquid Fill Button
HTML
CSS
JS
<button class="button">Hover Me</button>
body { height: 100vh; margin: 0; background: #111; display: flex; justify-content: center; align-items: center; font-family: sans-serif; } .button { position: relative; border: 2px solid #00f0ff; background: transparent; padding: 16px 40px; font-size: 1.2rem; color: #fff; overflow: hidden; border-radius: 10px; cursor: pointer; z-index: 1; } .button::before { content: ""; position: absolute; left: -50%; top: 100%; width: 200%; height: 200%; background: #00f0ff; border-radius: 50%; transform: scale(0); transition: transform 0.6s ease; z-index: -1; } .button:hover::before { transform: scale(1); top: -50%; } .button:hover { color: #000; }
//javascript
Ad #1
Ad #2
Scroll to Top