[分享]css3按钮按下效果

在网站设计时，一个漂亮的按钮可以吸引用户的眼球，并提高用户的交互体验。CSS3提供了一种简单但很酷的效果，可以通过按下按钮来增加按钮的交互性。下面我们来一步步实现这个效果。 首先，我们需要创建一个基本...

在网站设计时，一个漂亮的按钮可以吸引用户的眼球，并提高用户的交互体验。CSS3提供了一种简单但很酷的效果，可以通过按下按钮来增加按钮的交互性。下面我们来一步步实现这个效果。
首先，我们需要创建一个基本的按钮。比如下面这个：

<button class="button">按我</button> 

接下来，我们可以使用CSS3的伪类:hover来制作鼠标悬停时的效果。

.button:hover {
  background-color: #333;
  color: #fff;
} 

这会在用户悬停在按钮上时改变按钮的背景颜色和文字颜色。但是，我们想要更多效果。我们可以在按下按钮时添加另一个状态。为了做到这一点，我们可以使用CSS3的伪类:active。

.button:active {
  top: 2px;
  box-shadow: none;
} 

这将在按下按钮时向下移动按钮，并删除按钮的阴影效果。当然，默认情况下，按钮会有一个阴影效果，可以使用box-shadow属性来控制这个效果。
最后，你可能想让这个效果更加平滑。我们可以使用CSS3的过渡效果来制作动画效果。可以使用transition属性来实现这一点。

.button {
  transition: all .2s ease-in-out;
} 

现在悬停和按下我们的按钮时，按钮的状态会很自然地在CSS3动画下发生变化。
最终代码如下：

<button class="button">按我</button>
<br>
.button {
  background-color: #ccc;
  color: #333;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 3px #999;
  transition: all .2s ease-in-out;
}
<br>
.button:hover {
  background-color: #333;
  color: #fff;
}
<br>
.button:active {
  top: 2px;
  box-shadow: none;
} 

现在，你已经学会如何使用CSS3来制作按钮按下效果了。让你的网站变得更加酷炫！