持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

按钮功能在我们项目中是经常用到的，那么今天我就带来一个彩色按钮🔘。当然，色彩配的可能不合理，这里只提供一种思路，希望可以对小伙伴有所帮助。

多彩按钮

多彩按钮这里其实是指一个hover效果，当鼠标🖱️悬停上去后会有按钮色彩的变化。

结构

这里使用的是div标签，你也可以直接使用button标签并改变它的样式。

<div>也笑</div>

样式

首先，我们要给按钮一个基础的样式，有圆角、鼠标样式、文字上下垂直居中等等，如下：

div {
    width: 10rem;
    height: 4rem;
    border-radius: 4rem;
    text-align: center;
    line-height: 4rem;
    background-color: rgba(0, 255, 255, 0.5);
    cursor: pointer;
    color: #fff;
    font-size: 1.5rem;
}

设置border-radius的时候我们没有给百分比，而是给特定的值，是为了形成完美的圆角效果。当然，你也可以设置百分比，此时，我们需要根据宽高来计算一下：

div {
    border-radius: 40%/100%;
}

接下来就是设置hover效果，如下：

div:hover {
    background: linear-gradient(135deg, gold, cyan, red);
    animation: _animate 4s linear infinite;
}

@keyframes _animate {
    100% {
        filter: hue-rotate(360deg);
    }
}

我们先给背景一个多彩的底色，然后利用 animation 让色彩不停的变化。

效果

效果及代码详情，如下：

总结

随着社会的发展，客户的需求越来越多样化，此时，我们不仅要实现客户的功能需求，还要更尽可能的提供高质量的视觉需求。

按钮功能在项目中经常用到，为了提供更好的可视化效果，我们可以对按钮样式进行改变。可以给它加一个流动的边框，也可以给它一个浮动的效果，还可以给它一个流动色彩的底色。

当然，这种效果很多，我们只有尽可能的提供高质量的可视化效果，才会紧跟时代的步伐。