WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Gooey SVG Filter Button
1962
Andev.web
Open In Editor
Publish Your Code
Recommended
21 September 2024
Add button to open add profile model with form validation
9 September 2024
Electric button
10 August 2024
Gallery Filter
HTML
Copy
Andev Web
Gooey Button
CSS
Copy
@property --a { syntax: "<percentage>"; initial-value: 0%; inherits: true; } .dark button { --a: 0%; --hue: 170deg; --x: 50; --y: 50; --button: hsl(var(--hue), 66%, 66%); --edge: 20px; --size: 2em; background: transparent; color: hsla(var(--hue), 80%, 30%, 0.7); font-size: 1.8em; position: relative; padding: calc(var(--size)) calc(var(--size)*1.5); -webkit-animation: color 20s linear infinite both; animation: color 20s linear infinite both; transition: --a .5s ease-in-out, scale var(--spring-duration) var(--spring-easing); scale: 0.92; isolation: isolate; &:hover { --a: 100%; transition-duration: .5s, 1s; box-shadow: none; opacity: 1; scale: 1; } } button:before { content: ""; position: absolute; inset: 0em; filter: blur(12px) url(#goo) drop-shadow(0 .25em .5em hsla(0deg, 0%, 0%, 0.8)); background-image: linear-gradient(0deg,var(--button),var(--button)), radial-gradient( 40% 70% at calc(var(--x) * 1%) calc(var(--y) * 1%), hsla(var(--hue), 77%, 77%, var(--a)) 0%, transparent 90% ); background-clip: content-box, border-box; padding: 24px; z-index: -1; border: inherit; -webkit-animation: color 20s linear infinite both; animation: color 20s linear infinite both; } @property --hue { syntax: "<angle>"; initial-value: 170deg; inherits: false; } @-webkit-keyframes color { from { --hue: 170deg; } to { --hue: 530deg; } } @keyframes color { from { --hue: 170deg; } to { --hue: 530deg; } } body, html { height: 100%; } main { display: grid; place-items: center; color: var(--light); text-align: center; } :root { --spring-easing: linear( 0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%, 1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%, 1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%, 0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%, 0.998 84%, 1 ); --spring-duration: 1.66s; }
JS
Copy
function moveBg(e) { const rect = e.target.getBoundingClientRect(); e.target.style.setProperty('--x', (e.clientX - rect.x) / rect.width * 100); e.target.style.setProperty('--y', (e.clientY - rect.y) / rect.height * 100); } document.querySelector("button").addEventListener('pointermove', moveBg); let x; function intro() { let i = 4; let $b = document.querySelector("button"); $b.style.setProperty( "--a", '100%' ); x = setInterval(() => { $b.style.setProperty( "--x", ((Math.cos(i) + 2) / 3.6) * 100 ); $b.style.setProperty( "--y", ((Math.sin(i) + 2) / 3.6) * 100 ); i+= 0.03; if( i > 11.5 ) { clearInterval(x); $b.style.setProperty( "--a", '' ); } },16); } intro(); document.querySelector("button").addEventListener('pointerover', (e) => { clearInterval(x); e.target.style.setProperty( "--a", '' ); });