[分享]css3按钮按下渐变

CSS3的出现让网页设计更加炫丽，其中按钮的设计也是一大亮点。当用户点击按钮时，通过应用CSS3的渐变效果，可以让按钮色彩更加生动。下面我们来看看CSS3按钮按下渐变的实现方法。 .button { ...

CSS3的出现让网页设计更加炫丽，其中按钮的设计也是一大亮点。当用户点击按钮时，通过应用CSS3的渐变效果，可以让按钮色彩更加生动。下面我们来看看CSS3按钮按下渐变的实现方法。

.button {
    background: linear-gradient(#f6f6f6, #ebebeb);
}

.button:active {
    background: linear-gradient(#ebebeb, #f6f6f6);
} 

首先，我们给按钮加上默认的渐变背景。在上面的代码中，我们使用了线性渐变，从#f6f6f6到#ebebeb。这里可以根据设计需求自由搭配颜色。然后，在按钮被点击（active）之后，我们再加上一个反向的线性渐变，从#ebebeb到#f6f6f6。这样，在用户点击按钮时，按钮的颜色会从亮色慢慢转化为暗色，增加了用户交互的体验感。

需要注意的是，上面的代码中使用了伪类（:active）。这个伪类用来描述用户激活元素时的样式。除了按钮，其他元素，比如链接、输入框等，也可以使用这个伪类来定义不同状态下的样式。