Webleb - Snippet di Codice -

2052 Andev.web

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

12 July 2025

Pagina di destinazione per sviluppatori HTML CSS

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

Consigliato

modulo githup gmail

Un codice di Dossousandrin

Pagina di destinazione per sviluppatori HTML CSS

HTML

CSS

JS

Consigliato

modulo githup gmail

Un codice di Dossousandrin

Pagina di destinazione per sviluppatori HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS