流动按钮(效果绚丽，但实用性较差)

本次所设专栏主要内容为纯代码，可直接复制食用(较为少见，但值得思考)

本次less编写，也可使用css

一、HTML

<button>点击按钮</button>

二、less

//设置边框距离
@w: 2px;
//设置边框颜色
@color: rgb(104, 253, 114);

//动画
@keyframes moving {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

button {
    position: relative;
    cursor: pointer;
    margin: 100px auto;
    background: transparent;
    height: 50px;
    width: 130px;
    border-radius: 10px;
    font-size: 18px;
    //注释1
    overflow: hidden;
    color: rgb(244, 194, 76);
    border: 0;

    //使用伪类元素实现效果
    &::after,
    &::before {
        content: '';
        position: absolute;
    }

    &::after {
        border-radius: 10px;
        width: calc(100% - 2 * @w);
        height: calc(100% - 2 * @w);
        left: @w;
        top: @w;
        background-color: white;
        z-index: -1;
    }

    &::before {
        animation: moving 1s linear infinite;
        transform-origin: left top;
        left: 50%;
        top: 50%;
        width: 200%;
        height: 200%;
        background-color: @color;
        //注释2
        z-index: -2;
    }
}

将注释1和注释2下面的语句注释后即可查看到具体实现效果的过程