In Discord web app, when clicking & holding on a navbar (Server) button, it shifts a little bit down as shown in this GIF : https://imgur.com/a/bC25LtO

How can I achieve this effect in CSS, or maybe CSS & JS?

CodePudding user response：

You can use pseudo :active and position 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

or use :active with translateY()