[分享]css中button的状态

CSS中的button元素是网页设计中常用的一种交互元素，通过CSS的状态样式可以实现对button元素进行各种状态的定义，如hover、active、focus等。下面我们来了解一下这些状态的定义方...

CSS中的button元素是网页设计中常用的一种交互元素，通过CSS的状态样式可以实现对button元素进行各种状态的定义，如hover、active、focus等。下面我们来了解一下这些状态的定义方式：

button:hover{
  background: #ccc;
  color: #fff;
} 

上述代码指定了当用户将光标放在button元素上时，它的背景颜色变为#ccc，文字颜色变为#fff。

button:active{
  background: #aaa;
  color: #fff;
} 

上述代码指定了当用户按下鼠标左键时，button元素的背景颜色变为#aaa，文字颜色变为#fff。

button:focus{
  outline: none;
  box-shadow: 0 0 10px #aaa;
} 

上述代码指定了当button元素获取焦点时，它的外部边框变成10px的#aaa颜色阴影，并且去掉了焦点边框（outline:none）。

通过上面的例子，我们可以看到CSS能够方便地设计button元素的各种状态，从而提高网页交互性和用户体验。