如何使 HTML 按钮在使用 css 时看起来像是被按下了？

Question

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

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

Answer 1

通过使用 box-shadow: inset ...;

创造性地设计 :active 或 :focus pseudo classes

使用 :active 伪 class:

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 伪 class:

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

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

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 3

最好的方法是将页面上的按钮下移。使用 transformY 最多 straight-forward。然而，这可能会弄乱页面中其他内容的布局。所以我觉得还是用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>

如示例中所示，您可以从下边距中减去 2px，并将 2px 添加到上边距，因此您保留了按钮的总大小。

如果有多个按钮，您需要 vertical-align。

Answer 4

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

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

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

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

您可能会注意到，我们通过添加 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>

为避免其他按钮因边距变化而调整（移动），只需将每个按钮固定大小div。这样按钮在它们的 divs 内移动，而不会影响它们自己的 divs 内的其他按钮。

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

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

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

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

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

Answer 7

作为按钮的替代方案，还可以简单地使用带有伪 class :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>

如何使 HTML 按钮在使用 css 时看起来像是被按下了？

How to make HTML button look pressed in using css?

html

css

toggle

更新：