css当点到按钮颜色变化

CSS是前端开发中常用的样式表语言，优美的UI设计一般都离不开它的运用。今天我们就来谈一谈CSS在点击按钮后改变颜色的运用。

  button {
    background-color: #ccc;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
  }

  button:hover {
    background-color: #999;
  }

  button:active {
    background-color: #666;
  }

代码很简单，首先我们设置按钮的基本样式，包括背景色、无边框边界线、文字颜色等。接着我们使用:hover伪类来实现鼠标悬浮时的颜色变化，这时候我们的按钮便有了交互效果。最后一步是使用:active伪类来实现当我们点击按钮时的颜色变化，这就是CSS在按钮交互设计中使用的一种常用技巧。

当然，在实际开发中我们也可以使用JavaScript来实现这个效果，不过使用CSS会让我们的代码更加简洁，同时也能提升页面的渲染速度和性能。CSS的学习没有捷径，我们需要反复练习才能掌握好它的使用方法。