web-dev-qa-db-ja.com

CSSを使用してHTMLボタンが押されたように見えるようにするにはどうすればよいですか？

ボタンに影を付けて、押し込まれたように見えるようにするにはどうすればよいですか？

box-shadow: ... ;を使ってみました。しかし、これによる影響はありませんでした。

htmlcsstoggle
9
philr

:activeを使用して:focusまたはbox-shadow: inset ...;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>
15
Red

ボタンを作成する最良の方法は、押されたように見えることです。少し暗くすることです。

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>
5
therealbischero

最善の方法は、ページの下のボタンを微調整することです。 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>

例のように、下余白から2pxを取り除き、上余白にadd 2pxを加えることができるため、ボタンの合計サイズが保持されます。

複数のボタンがある場合は、垂直方向の配置が必要です。

1
John Henckel