转移的一个按钮，一些像素时，上点击按住

Question 1

在不和网络应用程序，当击&保持在导航栏(服务器)按钮，它转移一点点下如此GIF: https://imgur.com/a/bC25LtO

我如何可以实现这种效果在CSS，或者也许CSS和JS?

Question 2

你可以使用伪 :active 和位置 absolute

.btn {
  position: relative;
  top: 0px;
  font-family: "Open Sans";
  text-decoration: none;
  font-size: 25px;
  padding: 15px 50px;
  margin: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 5px 0px #ccc;
  transition: all 250ms ease;
}

.btn:active {
  position: relative;
  top: 5px;
  box-shadow: none !important;
  transition: all 250ms ease;
}

<button class="btn">press me</button>

或者使用 :active 与 translateY()

nos nart · Answer 1 · 2021-11-24T01:44:05

你可以使用伪 :active 和位置 absolute

.btn {
  position: relative;
  top: 0px;
  font-family: "Open Sans";
  text-decoration: none;
  font-size: 25px;
  padding: 15px 50px;
  margin: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 5px 0px #ccc;
  transition: all 250ms ease;
}

.btn:active {
  position: relative;
  top: 5px;
  box-shadow: none !important;
  transition: all 250ms ease;
}

<button class="btn">press me</button>

或者使用 :active 与 translateY()

转移的一个按钮，一些像素时，上点击按住

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别