search

Home  >  Q&A  >  body text

The correct way to achieve the button press effect in CSS

I'm using CSS to create a piano layout. I really like this "button pressed" effect, but it changes surrounding elements. How to avoid this 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;
}

The positioning of buttons is achieved using grids. Thanks!

P粉004287665P粉004287665534 days ago709

reply all(2)I'll reply

  • P粉754477325

    P粉7544773252023-09-10 12:45:44

    You can change the button element type. Let me share it below.

    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>

    reply
    0
  • P粉464208937

    P粉4642089372023-09-10 09:54:29

    You can use the transform attribute instead of adjusting the margin in the :active pseudo-class. The transform property allows you to scale the button slightly and move it downwards when pressed, without affecting the layout of surrounding elements.

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

    reply
    0
  • Cancelreply