title: With CSS, how to prevent a <button> from jumping between state...positions?
body: <p>I'm working to build a button styling where when the user hovers over a button, the button moves up 2 pixels. I have that working with the following on hover:</p>
  
  <pre><code>`transform: translateY(-2px);`
  </code></pre>
  
  <p>The problem is, if you move your mouse right under the button, the button starts to move but and the button now bounces/jumps from normal to active causing button jumpies.</p>
  
  <p>Any idea on how I can implement the button moving up 2 pixels on hover but without the jumpies when the mouse is near the edge of 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>.ui.button {
    outline: none;
    height: 48px;
    font-weight: 500;
    font-size: 17px;
    line-height: 20px;
    padding-top: 12.5px;
    padding-bottom: 12.5px;
    color: #fff;
    background: green;
    border: 1.5px solid darkGreen;
    box-shadow: 0 2px rgba(6,164,105,.25);
    transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
  }
  
  .ui.primary.button:hover {
    transform: translateY(-2px);
    background: green;
    border-color: darkGreen;
    box-shadow: 0 4px rgba(6,164,105,.25);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="ui medium primary button  button-icon-with-text " role="button" style="margin-bottom: 0px;"&gt;Primary Button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>