[分享]css3按钮背景色渐变

CSS3 是一种用于网站设计的最新的 CSS 版本。它拥有大量的新功能，其中之一就是按钮背景色渐变。

.btn {
    background: linear-gradient(to bottom right, #48C9B0, #3498DB);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
}

/* Hover */
.btn:hover {
    background: linear-gradient(to bottom right, #3498DB, #48C9B0);
} 

代码中的 linear-gradient 函数可以实现从一个颜色到另一个颜色的平滑渐变。从左到右渐变会使按钮背景颜色从左到右变化。在这个例子中，我们使用了渐变色从 TealBlue 到 Blue，当鼠标悬停在按钮上时，颜色变化会反向。

另外，我们也可以改变渐变角度。例如，我们可以使用 to bottom right，让颜色从左上角到右下角平滑渐变。还可以使用其他角度，例如 to top，to bottom，to right，to left，to top left，to top right，to bottom left 和 to bottom right。

通过使用 CSS3 中的按钮背景色渐变功能，我们可以轻松地实现漂亮的按钮样式而不必使用图片或 JavaScript。