将链接样式设置为按钮
添加样式为具有 CSS 属性的按钮的链接。
href 属性是 <a> 标记的必需属性。
它指定网页上的链接或者同一页面上用户单击链接后导航的位置。
使用 CSS 将链接样式设置为按钮的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.button {
background-color: #1c87c9;
border: none;
color: white;
padding: 20px 34px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<a href="https://www.onitroad.com/" class="button">Click Here</a>
</body>
</html>
由于需要复杂的样式，这可能不适用于特定浏览器。
让我们再看一个例子。
将链接样式设置为按钮的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.button {
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #7aa8b7;
border-radius: 6px;
outline: none;
}
</style>
</head>
<body>
<a class="button" href="https://www.onitroad.com/html/button-tag.html">HTML button tag</a>
</body>
</html>
有多种创建 HTML 按钮的方法，其作用类似于链接（即，单击它，用户将被重定向到指定的 URL）。
我们可以选择以下方法之一来向 HTML 按钮添加链接。
添加内联 onclick 事件
我们可以向 <button> 标记添加内联 onclick 事件。
如果按钮位于 <form> 元素内，这可能不起作用。
将 onclick 事件添加到 <button> 标签的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<button onclick="window.location.href='https://onitroad.com';">
Click Here
</button>
</body>
</html>
还可以向 <form> 元素内的 <input> 标记添加内联 onclick 事件。
将 onclick 事件添加到 <input> 标签的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<form>
<input type="button" onclick="window.location.href='https://www.onitroad.com';" value="onitroad" />
</form>
</body>
</html>
禁用 JavaScript 时链接将无法工作，搜索引擎可能会忽略此类链接。
使用 action 或者 formaction 属性。
另一种创建像链接一样的按钮的方法是使用 <form> 元素中的 action 或者 formaction 属性。
创建一个具有 action 属性的按钮的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<form action="https://www.onitroad.com/">
<button type="submit">Click me</button>
</form>
</body>
</html>
要在新选项卡中打开链接，请添加 target="_blank"。
在新窗口中通过按钮打开链接的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<form action="https://www.onitroad.com/" method="get" target="_blank">
<button type="submit">Click me</button>
</form>
</body>
</html>
由于没有表单，也没有提交数据，这在语义上可能是不正确的。
但是，此标记是有效的。
创建一个具有 formaction 属性的按钮的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<form>
<button type="submit" formaction="https://www.onitroad.com">Click me</button>
</form>
</body>
</html>
像链接一样工作的 HTML 按钮 在 StackDev 上讨论上述主题并获得报酬！得到报酬
formaction 属性仅用于 type="submit" 的按钮。
由于此属性是特定于 HTML5 的，因此它在旧浏览器中的支持可能很差。
日期：2020-06-02 22:15:07 来源：oir作者：oir