title: I want to add a border to my button on hover event without moving the button or anything
body: <p>right now I want to implement a border on hover on a button.</p>
  
  <p>That button is in a div together with 3 other buttons. However, as soon as I hover over it, the border is being displayed, but at the same time the button expands the size of the added border as well, which is not what I have in my mind.</p>
  
  <p>I made a fiddle to demonstrate the problem: <a href="https://jsfiddle.net/L9dfg74f/3/" rel="noreferrer">Click me</a></p>
  
  <p>I read up about this topic here, and I indeed found a solution, by adding <code>margin-top: 3px;</code>
  to the hover classes, however, that "squeezes" the button, which is not what I want.</p>
  
  <p>Instead, I want the button to not look compressed or anything, but rather simply with a 4px border overlaying the top 4 px of the button.</p>
  
  <p>Any advice?</p>
  
  <p>Thanks in advance</p>