HTML 按钮在新标签页中打开 link

Question

这是我想要做的。

我想设置一个 HTML 按钮，它将在新选项卡中打开 link https://example.com。

我设置了一个按钮 here。我可以使用 JS、CSS、HTML 和其他所有东西。

这是我想出来的。

<a href="/" target="_blank">
 <button class="pure-material-button-contained">Visit my website</button>
</a>

到目前为止，这是我的代码：

<!DOCTYPE html>
<html lang=en>
<head>
<style>
  .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;
}
</style>
 <link rel="icon" sizes="192x192" href="https://i.ibb.co/J59P0h4/58097612.jpg">
 <link rel="shortcut icon" href="https://i.ibb.co/J59P0h4/58097612.jpg" type="image/x-icon"/>
 <link rel="apple-touch-icon" href="https://i.ibb.co/J59P0h4/58097612.jpg" type="image/x-icon"/>
  
   <meta content="https://3kh0.github.io/" property="og:url" />
   <meta content="https://i.ibb.co/J59P0h4/58097612.jpg" property="og:image" />
   <meta content="#00FF00" data-react-helmet="true" name="theme-color" />
   <meta name="title" content="Dev">
   <meta name="description" content="Woah there! You might have typed the URL wrong!">
   <meta name="keywords" content="games, ad blocker, trolls, unblocked games, web games, online games, fun, tags">
   <meta name="robots" content="index, follow">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="language" content="English">
   <meta name="revisit-after" content="1 days">
   <meta name="author" content="3kh0">
   <meta charset=utf-8>
   <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  </head>
  <body>
    <a href="https://3kh0.github.io" target="_blank">
    <button class="pure-material-button-contained">Visit my website</button>
    </a>
 </body>
</html>

这是 Google 包含的按钮中的 CSS。

您可以在这里查看：https://material.io/components/buttons

Answer 1

你可以通过一个JS函数来完成，就像this

<button onclick="openExampleTab()">
  Open my Tab
</button>

<script>
    function openExampleTab() {
       window.open("https://example.com", "_blank");
    }
</script>

或者您可以使用 href 属性指向您的页面的锚标记：

<a href="https://example.com" target="_blank">Open my tab</a>

Answer 2

只需使用锚标记即可。

<a href="https://example.com" target="_blank">Click Here</a>

对于导航，只需使用锚标记，随意将其设置为按钮样式并让它很好地使用它的 href 属性，仅当它代表真正的按钮时才使用按钮，例如（播放、暂停、开始..等)

如果你坚持，就用window.open函数

button.addEventListener("click", () => window.open("https://example.com", "_blank"));

Answer 3

a {
  background: #0a95ff;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  text-decoration: none;
}

<a href="https://example.com">Example</a>

Answer 4

只需将 target="_blank" 属性添加到您的锚标记即可：

<button><a href="https://example.com" target="_blank">Click here to open in new tab</a></button>

它也可以在新 window 中打开，具体取决于您的浏览器设置。

HTML 按钮在新标签页中打开 link

HTML button thats opens link in new tab

html

javascript

browser

button