चिपचिपा SVG फ़िल्टर बटन

1966 Andev.web

अनुशंसित

3 July 2025

<!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;
}

चिपचिपा SVG फ़िल्टर बटन

अनुशंसित

लाइक बटन

मूल HTML बटन उदाहरण

डाउनलोड बटन

HTML

CSS

JS

अनुशंसित

लाइक बटन

मूल HTML बटन उदाहरण

डाउनलोड बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS