如何使用 css 使 HTML 按钮看起来被按下？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38377062/
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
How to make HTML button look pressed in using css?
提问by philr
How do I style a button, with a shadow, so that it looks like it is pressed in?
如何设置带有阴影的按钮样式，使其看起来像是被按下？
I tried using box-shadow: ... ;. But this didn't have any affect.
我尝试使用box-shadow: ... ;. 但这没有任何影响。
回答by Red
By creatively styling the :activeor :focuspseudo classesusing a box-shadow: inset ...;
通过创造性的造型:active或:focus伪类使用box-shadow: inset ...;
Using the :activepseudo class:
使用:active伪类：
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}<button>
Click me
</button>Using the :focuspseudo class:
使用:focus伪类：
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:focus {
background: #e5e5e5;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}<button>
Click me
</button>回答by therealbischero
I think that the best way to make a button looks like it's pressed it's to make it a little darker.
我认为让按钮看起来像是被按下的最好方法是让它变暗一点。
button{
background-color: #03A9F4;
border: none;
padding: 15px 25px;
text-transform: uppercase;
color: white;
font-weight: 700;
border-radius: 3px;
}
button:hover, button:focus{
background-color: #0074a9;
outline: none;
}<button>Button</button>回答by John Henckel
The best way is to nudge the button lower on the page. Using transformYwould be the most straight-forward. However that can mess up the layout of other things in the page. So I think that it is better to use marginto temporarily lower the button, such as,
最好的方法是轻推页面上的按钮。使用transformY将是最直接的。但是，这可能会弄乱页面中其他内容的布局。所以我认为最好使用margin暂时降低按钮，例如，
button {
background-color: white;
padding: 10px;
vertical-align: top;
box-shadow: 2px 1px 2px gray;
margin: 4px 10px 4px 10px;
}
button:active {
box-shadow: 0 0 0 white;
margin: 6px 10px 2px 10px;
}<button>click me</button>
<button>click me</button>
<br>
<button>click me</button>
<button>click me</button>As in the example, you can take away 2px from the bottom margin, and add2px to the top margin, therefore you preserve the total size of the button.
在示例中，您可以从底部边距中移除 2px ，并将2px添加到顶部边距，因此您可以保留按钮的总大小。
You need vertical-align in case there are more than one button.
如果有多个按钮，您需要垂直对齐。
回答by rahul patil
.button{
color: white;
background-color: blue;
padding: 8px 25px;
border-radius : 7px;
}
.button:active {
box-shadow: 0 0 0 black;
margin: 3px 0 0 0 ;
}<input type="button" class="button" value="Enter">回答by cssyphus
If you think visually about what happens when a push-button (like on an old-style stereo system) is pushed in, the button moves back. Visually, the face of the button is darker. The text on the button is inset. The border of the button is dark.
如果您直观地考虑按下按钮（如旧式立体声系统）时会发生什么，按钮会向后移动。在视觉上，按钮的表面更暗。按钮上的文字已插入。按钮的边框是黑色的。
The above answers all give part of the answer - so please upvote them if you upvote this one.
以上答案都给出了部分答案——所以如果你对这个问题点赞，请点赞。
This visually does all of the above:
这在视觉上完成了上述所有操作：
.btnPushed {
color: #efefef; //orig text color was #FFF
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 4px #222;
transform: translateY(1px); /* Add per Vince's helpful comment */
}
As you might notice, we apply the styling by adding a class.
您可能会注意到，我们通过添加一个类来应用样式。
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-color: #b8860b;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button class="depressed">Button3</button>
<button>Button4</button>To avoid the adjustment (movement) of the other buttonsdue to the margin change, just put each button into a fix-size div. That way the buttons move around within their divs, without affecting the other buttons inside their own divs.
为避免其他按钮因边距变化而调整（移动），只需将每个按钮放入一个固定大小的 div 中。这样按钮在它们的 div 内移动，而不会影响它们自己的 div 内的其他按钮。
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});div {
display: inline-block;
width: 65px;
height: 25px;
}
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div><button>Button1</button></div>
<div><button>Button2</button></div>
<div><button class="depressed">Button3</button></div>
<div><button>Button4</button></div>Update:
更新：
Added transform: translateY(1px), per Vince's helpful comment below.
添加transform: translateY(1px)，根据文斯下面的有用评论。
