Html CSS按钮按下效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32459859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css button pressing effect
提问by Jojo01
I have a button with a box-shadow that makes it look like it's floating, and I would like to make a pressing effect when I click on it:
我有一个带有框阴影的按钮，使它看起来像是浮动的，我想在单击它时产生按压效果：
Code(CSS):
代码（CSS）：
#startBtn
{
font-family: OpenSans;
color: #FFFFFF;
background-color: #00FF7C;
border: 1px solid #00FF7C;
border-radius: 5px;
box-shadow: 0px 5px 0px #00823F;
}
Code(HTML):
代码（HTML）：
<input type="button" id="startBtn" value="Let's begin">
Screenshot:
截屏：
回答by Manoj Kumar
Use :activepseudo class and change the box-shadow vertical offset value. Adjust the topvalue for the activated element with respect to the relatively positioned input with absolute parent.
使用:active伪类并更改 box-shadow 垂直偏移值。top相对于具有绝对父级的相对定位输入调整激活元素的值。
.button {
position: absolute;
}
#startBtn {
font-family: OpenSans;
color: #FFFFFF;
background-color: #00FF7C;
border: 1px solid #00FF7C;
border-radius: 5px;
box-shadow: 0px 5px 0px #00823F;
position: relative;
top: 0px;
transition: all ease 0.3s;
}
#startBtn:active {
box-shadow: 0 3px 0 #00823F;
top: 3px;
}<div class="button">
<input type="button" id="startBtn" value="Let's begin">
</div>回答by Alvaro Menéndez
IF the buttoms have a fixed height (as it looks) I would wrap the buttom into a div with that height and set the button to position absolute to create the right effect (moving it down) with:
如果按钮具有固定高度（看起来如此），我会将按钮包裹到具有该高度的 div 中，并将按钮设置为绝对位置以创建正确的效果（向下移动）：
#startBtn:active {
box-shadow: 0 1px 0 #00823F;
bottom:-4px;
}
回答by Siddu
You can use the CSS hoverproperty:
您可以使用 CSShover属性：
#startBtn:hover {
/* your css code here */
}
Another option is to use button generators like buttongarage.into generate your code for the button and the hover effect.
另一种选择是使用像buttongarage.in这样的按钮生成器来生成按钮和悬停效果的代码。
