title: What is causing the text in my button ("View all content") to appear 3D when zoomed in
body: <p>You can see the grey-ish shadow background underneath the text on the button on regular view and upon hovering. I'm not sure if it's because of the bootstrap theme I am using (relatively new + self-teaching). Any help is appreciated! Thanks.  </p>
  
  <p>CODEPEN: <a href="https://codepen.io/minacosentino/pen/JyBQxM" rel="nofollow noreferrer">https://codepen.io/minacosentino/pen/JyBQxM</a></p>
  
  <pre><code>.btn-primary {
    font-family: "Montserrat", arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .25rem;
    text-indent: .75rem;
    margin-bottom: 5rem;
    background: #4fd2c2;
    border-color: #4fd2c2;
    color: #fff;
    border: none;
    border-radius: 3rem;
    height: 30px;
    padding: 2rem 4rem;
    font-size: 1.25rem;
    line-height: 0rem;  
    }
  
    .btn-primary:hover {
      background: #ffffff;
      color: #4fd2c2;
      border: 2px solid #4fd2c2;
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/fc5J8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fc5J8.png" alt="enter image description here"></a></p>