39 lines
1.3 KiB
Markdown
39 lines
1.3 KiB
Markdown
|
---
|
|||
|
|
title: How to Create an HTML Button That Acts Like a Link
|
|||
|
|
localeTitle: 如何创建一个像链接一样的HTML按钮
|
|||
|
|
---
|
|||
|
|
## 如何创建一个像链接一样的HTML按钮
|
|||
|
|
|
|||
|
|
有时您可能希望使用按钮链接到其他页面或网站，而不是提交表单或类似的内容。这很简单，可以通过多种方式实现。
|
|||
|
|
|
|||
|
|
一种方法是简单地将`<button>`标签包装在`<a>`标签中：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这会将整个按钮转换为链接。
|
|||
|
|
|
|||
|
|
第二种方法是像往常一样使用`<a>`标签创建链接，然后通过CSS设置样式：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
创建链接后，您可以使用CSS使其看起来像一个按钮。例如，您可以添加边框，背景颜色，以及用户悬停链接时的某些样式...
|
|||
|
|
|
|||
|
|
添加按钮的另一种方法是将`input`包装在`form`标记内。在表单操作属性中指定所需的目标URL。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<form action="http://google.com">
|
|||
|
|
<input type="submit" value="Go to Google" />
|
|||
|
|
</form>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
* [FreeCodeCamp指南 - 样式按钮](https://guide.freecodecamp.org/css/css-buttons/)
|
|||
|
|
* [如何创建一个像链接一样的HTML按钮？](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link)
|