CSS实现按下按钮效果的正确方法

Question

我正在使用 CSS 创建钢琴布局。 我真的很喜欢这种“按下按钮”的效果，但它会改变周围的元素。如何避免呢？

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

按键的定位是使用网格实现的。 谢谢！

Answer 1

您可以使用

transform

属性，而不是在 :

margin

伪类中调整

active

。

transform

属性允许您稍微缩放按钮并在按下按钮时将其向下移动，而不影响周围元素的布局。

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

Answer 2

您可以更改按钮元素类型。下面我分享一下。

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 3

你可以试试这个代码：

button:active{
   transform: translate(4px, 4px);
   box-shadow: 1px 1px 5px black;
}

Answer 4

“按下按钮”效果会移动其周围的元素的原因是因为您在按钮处于活动状态时为其添加边距。避免这种情况的一种方法是使用transform:translate()而不是边距来在按下按钮时移动按钮。这样，按钮仍然会占用与之前相同的空间，并且其他元素不会受到影响。

以下是如何修改 CSS 以使用变换而不是边距的示例：

button:active {
    transform: translate(4px, 4px);
    box-shadow: 1px 1px 5px black;
}

在此代码中，我们使用 Transform 属性在按下按钮时将按钮向右移动 4 个像素，向下移动 4 个像素。 box-shadow 属性也被修改，使按钮看起来更像是被按下的。