原生css+js实现渐变色按钮

效果展示

原理说明

通过改变background-image实现渐变色
增大background-size后，通过js代码改变背景图片的坐标，实现渐变至黑色。

仅展示部分css代码，请自行修改HTML中的class属性

HTML

<div class="col-md-3">
    <div class="card card-widget">
        <div class="card-body gradient-12">
            <div class="media">
                <span class="card-widget__icon">
                    <i class="icon-bulb"></i>
                </span>
                <div class="media-body">
                    <h2 class="card-widget__title">吊灯</h2>
                    <h5 class="card-widget__subtitle">40w</h5>
                </div>
                <span>
                    <i><button class="btn btn3" onclick="my_button('.gradient-12','.btn3')">关闭</button></i>
                </span>
            </div>
        </div>
    </div>
</div>

CSS

.gradient-13{
  background-size: 800%;
  background-image: linear-gradient(135deg, #fc5286 0%,#fbaaa2 10%, #0b0b0b 100%);
  transition: 1s;
}

JS

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

function my_button(element, button) {
    let btn = document.querySelector(button);
    let elem = document.querySelector(element);
    let state = btn.innerText;

    if (state === '打开') {
        elem.style.backgroundPositionX = "0%";
        btn.innerText = '关闭';
    } else {
        elem.style.backgroundPositionX = "100%";
        btn.innerText = '打开';
    }
}