[分享]css3按钮上下浮动效果

在网页设计中，按钮常常被用来作为交互的控件。CSS3作为最新的前端技术之一，为我们提供了更多制作按钮的方式。今天，我们将介绍如何用CSS3为按钮添加上下浮动的效果。.button { : relati...

在网页设计中，按钮常常被用来作为交互的控件。CSS3作为最新的前端技术之一，为我们提供了更多制作按钮的方式。今天，我们将介绍如何用CSS3为按钮添加上下浮动的效果。

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #3498db;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 5px 0px #2980b9;
  transition: all 0.3s linear;
}

.button:hover {
  box-shadow: 0px 2px 0px #2980b9;
  top: -2px;
}

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

通过使用CSS3的position属性，我们为按钮设置了相对定位。同时，通过:hover和:active伪类，分别为按钮设置了鼠标悬停和点击时的效果。为了实现上下浮动的效果，我们使用了top属性，并结合transition属性实现动画过渡。

通过以上代码，我们成功地为按钮添加了上下浮动的效果。这种效果可以为网页添加更多动态感，同时也会增加用户的交互体验。