css按钮点击之后效果 |extjs4 自定义css

.btn {
width: 100px;
height: 40px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background-color: #0069d9;
}
.btn:active {
background-color: #005cbf;
}

上述代码中大家定义了一个基本的CSS按钮样式，点击按钮之后按钮颜色会发生变化，最终的颜色为点击时的激活状态。实现这种效果的关键是使用CSS的:hover和:active伪类。当用户把鼠标放到按钮上时，:hover状态会被激活，此时大家可以设置按钮的颜色、大小等属性。当用户点击按钮时，:active状态会被激活，此时大家同样可以设定按钮的颜色、大小等属性。

因为用户点击之后状态变化很短，大家通常不需要设置太多的动画效果，只需要简单明了的设置颜色变化即可。记住，当你设计按钮的样式时，要始终把用户体验放在第一位，通过提高用户的体验感，让用户对网站产生更好的印象，从而提高网站的流量和转化率。