css点击按钮实现效果

CSS点击按钮实现效果

button{
  background-color: #4CAF50;
 /* 绿色 */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
/* 点击后的效果 */
button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
 

上面的代码实现了一个基本的按钮样式，当用户点击按钮时，会有一个点击效果，来增加用户交互的反馈。

其中，button是按钮的基本样式，设置了背景颜色、边框、颜色、内边距、文本对齐方式等属性；button:active表示当按钮被按下时的样式，设置了背景颜色和阴影等效果。

通过这种方式，我们可以很方便地为网页增加一些交互效果，提升用户使用体验。