title: button moves up and down when clicked
body: <p>I wanted to create a skeuomorphic button and it looks good, however, it moves up and down when it's clicked. I noticed it happens the more I translate it, the issue then is that the button is centered on neither desktop nor mobile. Here is the CSS for the button:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.skeuo__button{
      width: 7rem;
      background: linear-gradient(90deg, #444650 0%, #101113 100%);
      padding: .75rem 1.25rem .75rem 1rem;
      border-radius: 1rem;
      box-shadow: inset -2px 0px 18px #212227,
                  inset -14px 0px 6px #43454F,
                  inset 4px 0px 6px #151619;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: .2s;
  }
  
  .skeuo__square{
      font-size: 18px;
      color: #5CCC9D;
  }
  
  .skeuo__line{
      transform: rotate(90deg);
      font-size: 22px;
      color: #9699A6;
  }
  
  .skeuo__switch:checked ~ .skeuo__button{
      background: linear-gradient(90deg, #101113 0% #444650 100%);
      box-shadow: inset -2px 0px 18px #212227,
                  inset -4px 0px 6px #151619,
                  inset 14px 0px 6px #43454F;
      padding: .75rem 1rem .75rem 1.25rem;
  
  }
  
  .skeuo__switch:checked ~ .skeuo__button .skeuo__square{
      font-size: 20px;
  }
  
  .skeuo__switch:checked ~ .skeuo__button .skeuo__line{
      font-size: 18px;
  }
  
  /* This is where I position the button */
  .mid-button{
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translate(0%, -500%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="mid-button"&gt;
      &lt;label&gt;
          &lt;input type="checkbox" class="skeuo__switch"&gt;
          &lt;div class="skeuo__button"&gt;
              &lt;i class='bx bx-heart-square skeuo__square'&gt;&lt;/i&gt;
              &lt;i class='bx bx-minus skeuo__line' &gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/label&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If any other information is needed to help please let me know!</p>