title: How to create hover effect and bring 2 different <a href> tag?
body: <p>In my case, I want to achieve exactly same thing and don't know how I'm suppose to do that.</p>
  <p><a href="https://i.stack.imgur.com/G7TDd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G7TDd.png" alt="hover" /></a></p>
  <p><a href="https://i.stack.imgur.com/Uka6B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uka6B.png" alt="normal button" /></a></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>.apply-button {
      position: absolute;
      margin-top: 8rem;
      border-radius: 5em;
      box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
      border-style: solid;
      border-width: 0.275rem;
      border-image-slice: 0;
      border-image-source: linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
      background-origin: border-box;
      background-clip: content-box, border-box;
      background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a role="button" class="apply-button" href="#"&gt;&lt;p&gt;apply&lt;/p&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>