title: HTML button thats opens link in new tab
body: <p>Here is what I am trying to do.</p>
  <p>I want to set up an HTML button that will open a link <code>https://example.com</code> in a new tab.</p>
  <p>I have a button set up <a href="https://3kh0.github.io/admin/ad" rel="nofollow noreferrer">here</a>. I can use JS, CSS, HTML, and everything else.</p>
  <p>This is what I have come up with.</p>
  <pre><code>&lt;a href=&quot;/&quot; target=&quot;_blank&quot;&gt;
   &lt;button class=&quot;pure-material-button-contained&quot;&gt;Visit my website&lt;/button&gt;
  &lt;/a&gt;
  </code></pre>
  <p>Here is my code so far:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=en&gt;
  &lt;head&gt;
  &lt;style&gt;
    .pure-material-button-contained {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      border: none;
      border-radius: 4px;
      padding: 0 16px;
      min-width: 64px;
      height: 36px;
      vertical-align: middle;
      text-align: center;
      text-overflow: ellipsis;
      text-transform: uppercase;
      color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
      background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
      font-size: 14px;
      font-weight: 500;
      line-height: 36px;
      overflow: hidden;
      outline: none;
      cursor: pointer;
      transition: box-shadow 0.2s;
  }
  
  .pure-material-button-contained::-moz-focus-inner {
      border: none;
  }
  
  /* Overlay */
  .pure-material-button-contained::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
      opacity: 0;
      transition: opacity 0.2s;
  }
  
  /* Ripple */
  .pure-material-button-contained::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      padding: 50%;
      width: 32px; /* Safari */
      height: 32px; /* Safari */
      background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
      opacity: 0;
      transform: translate(-50%, -50%) scale(1);
      transition: opacity 1s, transform 0.5s;
  }
  
  /* Hover, Focus */
  .pure-material-button-contained:hover,
  .pure-material-button-contained:focus {
      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  }
  
  .pure-material-button-contained:hover::before {
      opacity: 0.08;
  }
  
  .pure-material-button-contained:focus::before {
      opacity: 0.24;
  }
  
  .pure-material-button-contained:hover:focus::before {
      opacity: 0.3;
  }
  
  /* Active */
  .pure-material-button-contained:active {
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  
  .pure-material-button-contained:active::after {
      opacity: 0.32;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0s;
  }
  
  /* Disabled */
  .pure-material-button-contained:disabled {
      color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
      background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12);
      box-shadow: none;
      cursor: initial;
  }
  
  .pure-material-button-contained:disabled::before {
      opacity: 0;
  }
  
  .pure-material-button-contained:disabled::after {
      opacity: 0;
  }
  &lt;/style&gt;
   &lt;link rel="icon" sizes="192x192" href="https://i.ibb.co/J59P0h4/58097612.jpg"&gt;
   &lt;link rel="shortcut icon" href="https://i.ibb.co/J59P0h4/58097612.jpg" type="image/x-icon"/&gt;
   &lt;link rel="apple-touch-icon" href="https://i.ibb.co/J59P0h4/58097612.jpg" type="image/x-icon"/&gt;
    
     &lt;meta content="https://3kh0.github.io/" property="og:url" /&gt;
     &lt;meta content="https://i.ibb.co/J59P0h4/58097612.jpg" property="og:image" /&gt;
     &lt;meta content="#00FF00" data-react-helmet="true" name="theme-color" /&gt;
     &lt;meta name="title" content="Dev"&gt;
     &lt;meta name="description" content="Woah there! You might have typed the URL wrong!"&gt;
     &lt;meta name="keywords" content="games, ad blocker, trolls, unblocked games, web games, online games, fun, tags"&gt;
     &lt;meta name="robots" content="index, follow"&gt;
     &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
     &lt;meta name="language" content="English"&gt;
     &lt;meta name="revisit-after" content="1 days"&gt;
     &lt;meta name="author" content="3kh0"&gt;
     &lt;meta charset=utf-8&gt;
     &lt;meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width"&gt;
    &lt;title&gt;Error 404 (Not Found)!!1&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;a href="https://3kh0.github.io" target="_blank"&gt;
      &lt;button class="pure-material-button-contained"&gt;Visit my website&lt;/button&gt;
      &lt;/a&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is CSS from the Google contained buttons.</p>
  <p>You can view it here: <a href="https://material.io/components/buttons" rel="nofollow noreferrer">https://material.io/components/buttons</a></p>