如何使用 css 使 HTML 按钮看起来被按下？

Question

如何设置带有阴影的按钮样式，使其看起来像被按下？

我尝试使用box-shadow: ... ;。但这没有任何影响。

Answer 1

通过使用box-shadow: inset ...; 创造性地设置:active 或:focus pseudo classes 的样式

使用: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>

使用: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>

Answer 2

作为按钮的替代方案，还可以简单地使用带有伪类:checked 的复选框来切换状态。

label.label-checkbox {
  cursor: pointer;
}


label.label-checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

label.label-checkbox span {
  padding: 11px 21px;
  border: 1px solid #ccc;
  display: inline-block;
  color: #202020;
  border-radius: 6px;
  margin: 7px;
  background: #f5f5f5;
  user-select: none;
}

label.label-checkbox input:checked + span {
  box-shadow: inset 1px 2px 5px #777;
  transform: translateY(1px);
  background: #e5e5e5;
}

<h1>Pressed buttons with Checkbox</h1>

<label class="label-checkbox">
  <input type="checkbox">
  <span>Checkbox</span>
</label>
<label class="label-checkbox">
  <input type="checkbox" checked>
  <span>Styled</span>
</label>
<label class="label-checkbox">
  <input type="checkbox">
  <span>As</span>
</label>
<label class="label-checkbox">
  <input type="checkbox" checked>
  <span>Pressed</span>
</label>
<label class="label-checkbox">
  <input type="checkbox">
  <span>Buttons</span>
</label>

Answer 3

最好的方法是将按钮轻推到页面下方。使用transformY 将是最直接的。但是，这可能会弄乱页面中其他内容的布局。所以我觉得还是用ma​​rgin来暂时降低按钮比较好，比如，

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>

如示例所示，您可以从下边距中移除 2px，并在上边距中添加 2px，因此您可以保留按钮的总大小。

如果有多个按钮，则需要垂直对齐。

Answer 4

我认为让按钮看起来像是被按下的最好方法是让它变暗一点。

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>

Answer 5

如果您从视觉上考虑按下按钮（如在老式立体声系统上）时会发生什么，按钮会向后移动。从视觉上看，按钮的表面更暗。按钮上的文本是嵌入的。按钮的边框是深色的。

这里的其他答案都给出了部分答案。

这在视觉上完成了上述所有操作：

.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  */
}

您可能会注意到，我们通过添加一个类来应用样式。

$('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>

为避免其他按钮因边距变化而调整（移动），只需将每个按钮放入一个固定大小的 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>

更新：

根据下面文斯的有用评论添加了transform: translateY(1px)。

Answer 6

.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">

Answer 7

button{
background-color:grey;
padding:10px;
border:none;
color:white;

}
button:hover{
background-color:black;
color:white;
}

<button class"b1">button</button>