La bonne façon d'obtenir l'effet de pression sur un bouton en CSS

Question

J'utilise CSS pour créer une disposition de piano. J'aime beaucoup cet effet "bouton enfoncé", mais il modifie les éléments environnants. Comment éviter cette situation ?

<main>
    <div id="o-2" class="octave">
        <button id="C2" class="C key"></button>
        <button id="C2-sharp" class="C-sharp key-black"></button>
        <button id="D2" class="D key"></button>
        <button id="D2-sharp" class="D-sharp key-black"></button>
        <button id="E2" class="E key"></button>
    </div>
</main>

main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.octave {
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: repeat(14, auto);
}

button {
    border: 1px solid black;
    margin: 1px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}

button:active {
    margin-left: 4px;
    margin-top: 4px;
    box-shadow: 1px 1px 5px black;
}

Le positionnement des boutons est réalisé à l'aide de grilles. Merci!

Answer 1

Vous pouvez modifier le type d'élément de bouton. Permettez-moi de le partager ci-dessous.

main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.octave {
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: repeat(14, auto);
}

a {
    border: 1px solid black;
    margin: 1px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
    width:14px;
    height:30px;
}

a:active {
    margin-left: 4px;
    margin-top: 4px;
    box-shadow: 1px 1px 5px black;
}

<main>
    <div id="o-2" class="octave">
        <a id="C2" class="C key"></a>
        <a id="C2-sharp" class="C-sharp key-black"></a>
        <a id="D2" class="D key"></a>
        <a id="D2-sharp" class="D-sharp key-black"></a>
        <a id="E2" class="E key"></a>
    </div>
</main>

Answer 2

Vous pouvez utiliser l'attribut transform 属性来代替调整 :active 伪类中的 margin。 transform qui vous permet de redimensionner légèrement le bouton et de le déplacer vers le bas lorsque vous appuyez dessus, sans affecter la disposition des éléments environnants.

...
button {
  border: 1px solid black;
  margin: 1px;
  box-shadow: 5px 5px 5px black;
  cursor: pointer;
  transition: transform 0.2s ease; /* Add a smooth transition */
}

button:active {
  transform: scale(0.95) translateY(3px); /* Scale down and move down */
  box-shadow: 1px 1px 5px black;
}