Webleb - UI Elements - Gooey SVG Filter Button

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://codepen.io/simeydotme/pen/JjVgPVg/cf6bd78bc35895cfde263b6098003c0b.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<main id="app" class="dark">
        <button type="button">
            Gooey Button
        </button>
        
    </div>

</main>

</body>
</html>

CSS

@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

Gooey SVG Filter Button

Recommended