如何创建一个类似于链接的 HTML 按钮
主题:HTML / CSS
答案:使用提交按钮
如果您没有使用 <a> 元素的选项，那么您可以使用 <form> 内的提交按钮，其中 action 属性的值设置为所需的 URL。
让我们试试下面的例子来了解它的基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>让 HTML 按钮像一个链接</title>
<style>
form {
/* 使表单与周围的文本保持一致 */
display: inline;
}
</style>
</head>
<body>
<form action="https://www.google.com/">
<input type="submit" value="Go to Google">
</form>
</body>
</html>但是，如果您可以使用您选择的元素，那么您最好使用锚元素 (<a>) 并使用 CSS 属性对其进行样式设置，使其看起来像一个按钮，如下所示:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>让 HTML 链接看起来像一个按钮</title>
<style>
a.link-btn {
color: #fff;
background: #337ab7;
display:inline-block;
border: 1px solid #2e6da4;
font: bold 14px Arial, sans-serif;
text-decoration: none;
border-radius: 2px;
padding: 6px 20px;
}
a.link-btn:hover {
background-color: #245582;
border-color: #1a3e5b;
}
</style>
</head>
<body>
<a href="https://google.com" class="link-btn">Go to Google</a>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
