Cara yang betul untuk mencapai kesan tekan butang dalam CSS

Question

Saya menggunakan CSS untuk mencipta susun atur piano. Saya sangat suka kesan "butang ditekan" ini, tetapi ia mengubah elemen sekeliling. Bagaimana untuk mengelakkan situasi ini?

<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;
}

Kedudukan butang dicapai menggunakan grid. Terima kasih!

Answer 1

Anda boleh menukar jenis elemen butang. Jom saya kongsikan di bawah.

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

Anda boleh menggunakan atribut transform 属性来代替调整 :active 伪类中的 margin。 transform yang membolehkan anda menskalakan sedikit butang dan mengalihkannya ke bawah apabila ditekan, tanpa menjejaskan reka letak elemen sekeliling.

...
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;
}