<div class="grid">

    <button class="colorful-button">
        <div class="wrapper">
            <span>Primary</span>
            <div class="circle circle-12"></div>
            <div class="circle circle-11"></div>
            <div class="circle circle-10"></div>
            <div class="circle circle-9"></div>
            <div class="circle circle-8"></div>
            <div class="circle circle-7"></div>
            <div class="circle circle-6"></div>
            <div class="circle circle-5"></div>
            <div class="circle circle-4"></div>
            <div class="circle circle-3"></div>
            <div class="circle circle-2"></div>
            <div class="circle circle-1"></div>
        </div>
    </button>

    <button class="colorful-button dark">
        <div class="wrapper">
            <span>Dark</span>
            <div class="circle circle-12"></div>
            <div class="circle circle-11"></div>
            <div class="circle circle-10"></div>
            <div class="circle circle-9"></div>
            <div class="circle circle-8"></div>
            <div class="circle circle-7"></div>
            <div class="circle circle-6"></div>
            <div class="circle circle-5"></div>
            <div class="circle circle-4"></div>
            <div class="circle circle-3"></div>
            <div class="circle circle-2"></div>
            <div class="circle circle-1"></div>
        </div>
    </button>

</div>

<div class="grid">

    <button class="colorful-button secondary">
        <div class="wrapper">
            <span>Secondary</span>
            <div class="circle circle-12"></div>
            <div class="circle circle-11"></div>
            <div class="circle circle-10"></div>
            <div class="circle circle-9"></div>
            <div class="circle circle-8"></div>
            <div class="circle circle-7"></div>
            <div class="circle circle-6"></div>
            <div class="circle circle-5"></div>
            <div class="circle circle-4"></div>
            <div class="circle circle-3"></div>
            <div class="circle circle-2"></div>
            <div class="circle circle-1"></div>
        </div>
    </button>

    <button class="colorful-button light">
        <div class="wrapper">
            <span>Light</span>
            <div class="circle circle-12"></div>
            <div class="circle circle-11"></div>
            <div class="circle circle-10"></div>
            <div class="circle circle-9"></div>
            <div class="circle circle-8"></div>
            <div class="circle circle-7"></div>
            <div class="circle circle-6"></div>
            <div class="circle circle-5"></div>
            <div class="circle circle-4"></div>
            <div class="circle circle-3"></div>
            <div class="circle circle-2"></div>
            <div class="circle circle-1"></div>
        </div>
    </button>

</div>

<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>

.colorful-button {
    &.dark {
        --delay: .35s;
        --c-color-1: #{rgba(#404660, .3)};
        --c-color-2: #362A89;
        --c-color-3: #{rgba(#5C86FF, .3)};
        --c-color-4: #{rgba(#6D58FF, .4)};
        --c-shadow: #{rgba(#362A89, .4)};
        --c-shadow-inset-top: #{rgba(#646B8C, .6)};
        --c-shadow-inset-bottom: #{rgba(#8A91B4, .4)};
        --c-radial-inner: #404660;
        --c-radial-outer: #0D0F18;
    }
    &.light {
        --delay: .15s;
        --c-color-1: #{rgba(#ACA0FF, .15)};
        --c-color-2: #{rgba(#6EABFF, .15)};
        --c-color-3: #{rgba(#fff, .5)};
        --c-color-4: #{rgba(#6D58FF, .15)};
        --c-shadow: #{rgba(#004CB4, .1)};
        --c-shadow-inset-top: #{rgba(#fff, 1)};
        --c-shadow-inset-bottom: #{rgba(#fff, 1)};
        --c-radial-inner: #ECEFFC;
        --c-radial-outer: #fff;
        --c-color: #404660;
    }
    &.secondary {
        --delay: .35s;
        --c-color-1: #{rgba(#ACA0FF, .15)};
        --c-color-2: #{rgba(#6EABFF, .15)};
        --c-color-3: #{rgba(#5C86FF, .5)};
        --c-color-4: #{rgba(#ACA0FF, .15)};
        --c-shadow: #{rgba(#6D58FF, .25)};
        --c-shadow-inset-top: #{rgba(#ACA0FF, .2)};
        --c-shadow-inset-bottom: #{rgba(#ACA0FF, .5)};
        --c-radial-inner: #6D58FF;
        --c-radial-outer: #362A89;
    }
}

.colorful-button {
    --duration: 7s;
    --delay: 0s;
    --easing: linear;
    --c-color-1: #{rgba(#5C86FF, .7)};
    --c-color-2: #275EFE;
    --c-color-3: #{rgba(#362A89, .4)};
    --c-color-4: #{rgba(#ACA0FF, .3)};
    --c-shadow: #{rgba(#275EFE, .5)};
    --c-shadow-inset-top: #{rgba(#275EFE, .8)};
    --c-shadow-inset-bottom: #{rgba(#6EABFF, .6)};
    --c-radial-inner: #362A89;
    --c-radial-outer: #6D58FF;
    --c-color: #fff;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
    position: relative;
    cursor: pointer;
    border: none;
    display: table;
    border-radius: 24px;
    padding: 0;
    margin: 0;
    text-align: center;
    min-width: 140px;
    font-family: 'Inter';
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .02em;
    line-height: 1.5;
    color: var(--c-color);
    background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
    box-shadow: 0 0 20px var(--c-shadow);
    margin: 0 20px;
    &:before {
        content: '';
        pointer-events: none;
        position: absolute;
        z-index: 3;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 24px;
        box-shadow: inset 0 4px 12px var(--c-shadow-inset-top), inset 0 -4px 6px var(--c-shadow-inset-bottom);
    }
    .wrapper {
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        overflow: hidden;
        border-radius: 24px;
        min-width: 132px;
        padding: 12px 0;
        span {
            display: inline-block;
            position: relative;
            z-index: 1;
        }
        .circle {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            filter: blur(var(--blur, 8px));
            background: var(--background, transparent);
            transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
            animation: var(--animation, none) var(--duration) var(--easing) infinite var(--delay);
            &.circle-1,
            &.circle-9,
            &.circle-10 {
                --background: var(--c-color-4);
            }
            &.circle-3,
            &.circle-4 {
                --background: var(--c-color-2);
                --blur: 14px;
            }
            &.circle-5,
            &.circle-6 {
                --background: var(--c-color-3);
                --blur: 16px;
            }
            &.circle-2,
            &.circle-7,
            &.circle-8,
            &.circle-11,
            &.circle-12 {
                --background: var(--c-color-1);
                --blur: 12px;
            }
            &.circle-1 {
                --x: 0;
                --y: -40px;
                --animation: circle-1;
            }
            &.circle-2 {
                --x: 92px;
                --y: 8px;
                --animation: circle-2;
            }
            &.circle-3 {
                --x: -12px;
                --y: -12px;
                --animation: circle-3;
            }
            &.circle-4 {
                --x: 80px;
                --y: -12px;
                --animation: circle-4;
            }
            &.circle-5 {
                --x: 12px;
                --y: -4px;
                --animation: circle-5;
            }
            &.circle-6 {
                --x: 56px;
                --y: 16px;
                --animation: circle-6;
            }
            &.circle-7 {
                --x: 8px;
                --y: 28px;
                --animation: circle-7;
            }
            &.circle-8 {
                --x: 28px;
                --y: -4px;
                --animation: circle-8;
            }
            &.circle-9 {
                --x: 20px;
                --y: -12px;
                --animation: circle-9;
            }
            &.circle-10 {
                --x: 64px;
                --y: 16px;
                --animation: circle-10;
            }
            &.circle-11 {
                --x: 4px;
                --y: 4px;
                --animation: circle-11;
            }
            &.circle-12 {
                --blur: 14px;
                --x: 52px;
                --y: 4px;
                --animation: circle-12;
            }
        }
    }
}

@keyframes circle-1 {
    33% {
        transform: translate(0px, 16px) translateZ(0);
    }
    66% {
        transform: translate(12px, 64px) translateZ(0);
    }
}

@keyframes circle-2 {
    33% {
        transform: translate(80px, -10px) translateZ(0);
    }
    66% {
        transform: translate(72px, -48px) translateZ(0);
    }
}

@keyframes circle-3 {
    33% {
        transform: translate(20px, 12px) translateZ(0);
    }
    66% {
        transform: translate(12px, 4px) translateZ(0);
    }
}

@keyframes circle-4 {
    33% {
        transform: translate(76px, -12px) translateZ(0);
    }
    66% {
        transform: translate(112px, -8px) translateZ(0);
    }
}

@keyframes circle-5 {
    33% {
        transform: translate(84px, 28px) translateZ(0);
    }
    66% {
        transform: translate(40px, -32px) translateZ(0);
    }
}

@keyframes circle-6 {
    33% {
        transform: translate(28px, -16px) translateZ(0);
    }
    66% {
        transform: translate(76px, -56px) translateZ(0);
    }
}

@keyframes circle-7 {
    33% {
        transform: translate(8px, 28px) translateZ(0);
    }
    66% {
        transform: translate(20px, -60px) translateZ(0);
    }
}

@keyframes circle-8 {
    33% {
        transform: translate(32px, -4px) translateZ(0);
    }
    66% {
        transform: translate(56px, -20px) translateZ(0);
    }
}

@keyframes circle-9 {
    33% {
        transform: translate(20px, -12px) translateZ(0);
    }
    66% {
        transform: translate(80px, -8px) translateZ(0);
    }
}

@keyframes circle-10 {
    33% {
        transform: translate(68px, 20px) translateZ(0);
    }
    66% {
        transform: translate(100px, 28px) translateZ(0);
    }
}

@keyframes circle-11 {
    33% {
        transform: translate(4px, 4px) translateZ(0);
    }
    66% {
        transform: translate(68px, 20px) translateZ(0);
    }
}

@keyframes circle-12 {
    33% {
        transform: translate(56px, 0px) translateZ(0);
    }
    66% {
        transform: translate(60px, -32px) translateZ(0);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter', Arial;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #F6F8FF;
    .grid {
        display: flex;
        margin: 24px 0;
        .colorful-button {
            margin: 0 16px;
        }
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
        svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    }
}