花里胡哨的炫彩按键

上班摸鱼，闲来无事搞了个按钮，自我感觉良好。🐕
话不多说，上代码！
html:

<button class="clibtn" ><span class="sub clitop oneCl1">Sub</span></button>

CSS:

* {
        padding: 0;
    }

    .clibtn {
        position: absolute;
        top: 50%;
        right: 50%;
        border-radius: .1rem;
        border: 0px;
        height: .5rem;
        width: 1.5rem;
        cursor: pointer;
        background-color: black;
    }

    .oneCl1 {
        --magic-color-MY-button-0: hsl(240, 100%, 40%);
        --magic-color-MY-button-1: hsl(311, 100%, 40%);
        --magic-color-MY-button-2: hsl(334, 100%, 40%);
    }

    .oneCl2 {
        --magic-color-MY-button-0: hsl(311, 100%, 40%);
        --magic-color-MY-button-1: hsl(334, 100%, 40%);
        --magic-color-MY-button-2: hsl(240, 100%, 40%);
    }

    .oneCl3 {
        --magic-color-MY-button-0: hsl(334, 100%, 40%);
        --magic-color-MY-button-1: hsl(240, 100%, 40%);
        --magic-color-MY-button-2: hsl(311, 100%, 40%);
    }

    .sub {
        will-change: transform,box-shadow;
        box-shadow: inset 0px 5px 5px 2px rgba(255, 255, 255, .3);
        line-height: 0.5rem;
        display: block;
        margin: auto;
        border-radius: .1rem;
        border: 0px;
        height: .5rem;
        width: 1.5rem;
        color: white;
        background: radial-gradient(circle at top left,
                var(--magic-color-MY-button-0),
                var(--magic-color-MY-button-1),
                var(--magic-color-MY-button-2));
        transform: translateY(-8px);
        transition:
            --magic-color-MY-button-0 2s linear 0s,
            --magic-color-MY-button-1 2s linear 0s,
            --magic-color-MY-button-2 2s linear 0s;
    }

    .sub:active {
        will-change: transform,box-shadow;
        transform: translateY(-2px);
        box-shadow: inset 0px -3px 5px 2px rgba(255, 255, 255, .3);
    }

JS:

function recal() {
        let docElement = document.documentElement || document.body;
        let clientWidth = docElement.clientWidth,
            designWidth = 1200;
        if (clientWidth < 750) {
            designWidth = 640;
        } else if (clientWidth < designWidth) {
            clientWidth -= 80
        } else {
            clientWidth = designWidth;
        }
        docElement.style.fontSize = (clientWidth / designWidth) * 100 + "px";
    }
    window.addEventListener("resize", recal);
    recal();
    window.CSS.registerProperty({
        name: '--magic-color-MY-button-0',
        syntax: '<color>',
        inherits: false,
        initialValue: 'hsl(0, 100%, 40%)',
    });
    console.log('123')
    window.CSS.registerProperty({
        name: '--magic-color-MY-button-1',
        syntax: '<color>',
        inherits: false,
        initialValue: 'hsl(0, 100%, 40%)',
    });
    window.CSS.registerProperty({
        name: '--magic-color-MY-button-2',
        syntax: '<color>',
        inherits: false,
        initialValue: 'hsl(0, 100%, 40%)',
    });
    let index = 2
    var timer = setInterval(function () {
        document.querySelector(".sub").className = `oneCl${index} sub clitop`
        index++ === 3 ? index = 1 : '';
    }, 2000)

为了能够让浏览器能够读取到自定义的样式,需要在window上注册自定义属性

window.CSS.registerProperty({ name: '--magic-color-MY-button-2', syntax: '<color>', inherits: false, initialValue: 'hsl(0, 100%, 40%)', });

最后再通过transition实现按钮背景色的过渡