Přesun tlačítka tím, že některé pixely, když na klepněte na tlačítko a podržte

Question 1

Ve Sváru web app, při kliknutí a držení na navbar (Server) tlačítko, to posune trochu dolů, jak je znázorněno v tomto GIF : https://imgur.com/a/bC25LtO

Jak lze dosáhnout tohoto efektu v CSS, nebo možná CSS A JS?

Question 2

Můžete použít pseudo :active a pozice 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>

nebo použít :active s translateY()

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

Můžete použít pseudo :active a pozice 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>

nebo použít :active s translateY()

Přesun tlačítka tím, že některé pixely, když na klepněte na tlačítko a podržte

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii