[分享]css3按钮切换效果

CSS3在按钮切换效果方面非常强大，可以使用一些简单的代码让按钮在点按时出现非常酷炫的样式。下面的示例演示了基本的CSS3按钮切换效果。button { border: none; backgroun...

CSS3在按钮切换效果方面非常强大，可以使用一些简单的代码让按钮在点按时出现非常酷炫的样式。下面的示例演示了基本的CSS3按钮切换效果。

button {
  border: none;
  background-color: #5B9BD5;
  color: #FFFFFF;
  font-size: 18px;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
}

button:hover {
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
}

button:active {
  background-color: #4673A6;
  box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(2px);
} 

上述示例中，使用了CSS3的:hover和:active伪类来实现按钮的切换效果。当用户悬浮在按钮上时，会出现一个阴影效果；当用户点击按钮时，按钮背景变得更深，同时出现一个向下的阴影效果，模拟了按钮被按下的效果。

这只是CSS3按钮切换效果的一个简单示例，实际上，您可以使用CSS3实现各种炫酷的按钮效果，例如旋转、缩放、动画和过渡。就是一个简单的CSS3按钮，也能够让您的网站看起来更具吸引力。