title: Reset state of link after clicking
body: <p>I have a button like so:</p>
  
  <p><a href="https://i.stack.imgur.com/giVpB.png" rel="nofollow"><img src="https://i.stack.imgur.com/giVpB.png" alt="enter image description here"></a></p>
  
  <p>When I hover over it, it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LKQit.png" rel="nofollow"><img src="https://i.stack.imgur.com/LKQit.png" alt="enter image description here"></a></p>
  
  <p>When I click on it, it'll take me to a new tab that shows my resume. However, when I come back, there's an underline that I'd like to remove:</p>
  
  <p><a href="https://i.stack.imgur.com/TiG6l.png" rel="nofollow"><img src="https://i.stack.imgur.com/TiG6l.png" alt="enter image description here"></a></p>
  
  <p>And I can and did remove it because I styled the <code>:focus</code> part of the button:</p>
  
  <pre><code>.resume-button:focus {
      text-decoration: none;
      color: #FFFFFF;
  }
  </code></pre>
  
  <p>The problem arises when the user tries to hover over the link again. It's not hovering anymore because the link is still "clicked"; hence when I hover, the color of the text "Resume" remains white and won't change color until I click somewhere else to reset the link. How can I reset the state of the <code>&lt;a&gt;</code> without clicking on some other part of the website?</p>