title: why is that there is a dark area around the buttons when they are tapped on mobile devices
body: <p>the code is: <a href="https://codesandbox.io/s/gatsby-starter-default-og782" rel="nofollow noreferrer">https://codesandbox.io/s/gatsby-starter-default-og782</a></p>
  
  <p>I used <code>styled-component</code> to style a <code>&lt;a&gt;</code> tag to be my button.</p>
  
  <p>for example,</p>
  
  <pre><code>const CloseButton = styled.a`
    position: relative;
    font-size: 30px;
    top: 30vh;
  `
  </code></pre>
  
  <p>And I implemented a hover effect with the <code>&lt;a&gt;</code> tag with <code>transform: translateY(-3px);</code></p>
  
  <pre><code>  a {
      outline: none;
      font-size: ${fontSizes.medium};
      ${media.phablet` font-size: ${fontSizes.small};`}
      font-weight: 500;
      display: inline-block;
      text-decoration: none;
      text-decoration-skip-ink: auto;
      color: inherit;
      position: relative;
      transition: ${theme.transition};
      cursor: pointer;
    margin: 0 auto;
    padding: 7px;
      &amp;:hover,
      &amp;:focus
       {
      transform: translateY(-3px);
      }
      -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none;    
  
    }
  </code></pre>
  
  <p>Now it works fine on desktop. But when I view it on mobile devices(you can try the demo here <a href="https://og782.sse.codesandbox.io/" rel="nofollow noreferrer">https://og782.sse.codesandbox.io/</a>)</p>
  
  <p>There is a dark area around the buttons when they are tapped </p>
  
  <p>Could someone please help me to get rid of this?</p>
  
  <p><a href="https://i.stack.imgur.com/h7ZOz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h7ZOz.png" alt="enter image description here"></a></p>