Can / should I add the box-shadow's size to the element's total size?
<p>I know it doesn't by default, but I'm trying to force it to.</p>

<p>I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts. </p>

<p>Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.</p>

<p>Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.</p>

<p><strong>TLDR: my anchor flickers when hovered too close to the edge. alternatives?</strong></p>

<p>The code is working, but I'll paste it anyway.</p>

<p>Here's the code:</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>.btn {
  display: inline-block;
  width: 50%;
  margin-left: 25%;
  /*center*/
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #71e2ff;
  box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
  box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
  transform: translateY(-2px);
}
.btn:active {
  box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
  transform: translateY(0);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;a class="btn" href="#"&gt;suscribe&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p><strong>EDIT:</strong>
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.</p>