css按钮按下弹跳 |div css 控制图片

css语言全称，css设置隐藏效果，css水平居中实现方法，css单独定义边框样式，weui.min.css库下载，css和html同时加载了，div css 控制图片 css按钮按下弹跳 |div css 控制图片

.button {
padding: 15px 30px;
background-color: #3e8e41;
color: #fff;
border: none;
border-radius: 5px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
transition: all 0.1s linear;
}
.button:active {
transform: translateY(2px);
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
}

以上代码是一个简单的CSS样式，可以实现按钮按下弹跳效果。大家先给按钮设置一些基础样式，包括背景色、字体颜色、边框和阴影等属性。在按钮被按下时，大家通过伪类:active来实现弹跳效果。这里大家使用了CSS3的transform属性和box-shadow属性，分别控制按钮的位置移动和阴影效果。

当用户点击按钮时，transform: translateY(2px);可以使按钮向下移动2个像素，然后再恢复原位，形成短暂的弹跳效果；而box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);可以使按钮在下面留下一些阴影，增加按钮的立体感。

综上所述，CSS按钮按下弹跳效果可以增加按钮的互动感和视觉效果，提高用户点击按钮的兴趣。而这种效果的实现也非常简单，只需掌握几个基本的CSS属性即可。建议在设计按钮时，尝试使用这种效果，让你的页面设计更加出色。