[分享]css3按钮触摸上下合并

CSS3技术使得设计师可以更轻松地制作复杂的按钮动画和效果。今天，我们来学习如何使用CSS3创建一个触摸上下合并的按钮。/CSS代码/ .button { display: inlineblock; ...

CSS3技术使得设计师可以更轻松地制作复杂的按钮动画和效果。今天，我们来学习如何使用CSS3创建一个触摸上下合并的按钮。

/*CSS代码*/
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  background: #FFC700;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 20px;
  transition: all 0.3s;
}

.button:hover {
  transform: translateY(-5px);
}

.button:active {
  transform: translateY(5px);
} 

这里，我们使用了CSS3的transform属性来创建按钮的触摸上下合并效果。我们将按钮的默认状态下，将按钮稍微向上移动了5px，当鼠标悬停在按钮上时按钮又会稍微向下移动5px，使得按钮看起来像是被按下一样。这个效果实现起来非常简单。

由于CSS3技术在现代浏览器中得到了广泛的支持，使用CSS3制作按钮动画和效果已经成为现代Web设计的标配。