[分享]css3按钮弹动效果

CSS3有很多酷炫的效果，其中之一就是按钮弹动效果。当我们鼠标移到按钮上时，按钮会产生微小的弹跳效果，使得按钮看起来更加生动有趣。.button { backgroundcolor: 4CAF50; ...

CSS3有很多酷炫的效果，其中之一就是按钮弹动效果。当我们鼠标移到按钮上时，按钮会产生微小的弹跳效果，使得按钮看起来更加生动有趣。

.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; /* 鼠标变为手型 */
  transition-duration: 0.4s; /* 过渡时间 */
}

.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); /* 阴影效果 */
  transform: translateY(-5px); /* 按钮上移5像素 */
} 

通过将按钮元素设置为内联块级元素，可以使得按钮水平排列。使用:hover选择器可以在鼠标滑过按钮时触发CSS3过渡动画效果。在:hover选择器中，使用box-shadow属性来添加阴影效果，同时使用transform属性来实现按钮的移动效果。

使用CSS3效果可以提高网页的用户体验，让我们的网页看起来更加生动有趣。因此，在设计和开发网页时，我们可以尝试使用各种CSS3效果来使网页变得更加炫酷和有吸引力。