HTML <button> 标签

示例

一个可点击的按钮标签如下：

<button type="button">Click Me!</button>

定义和用法

<button> 标签定义了一个可点击的按钮。

在 <button> 元素中，您可以放置文本（以及 <i>、<b>、<strong>、<br>、<img> 等标签）。使用 <input> 元素创建的按钮是不可能的！

提示： 始终为 <button> 元素指定 type 属性，以告诉浏览器它是什么类型的按钮。

提示： 您可以使用 CSS 轻松设置按钮样式！

浏览器支持

Element
<button>	Yes	Yes	Yes	Yes	Yes

属性 Attributes

属性	值	描述
autofocus	autofocus	指定当页面加载时按钮应该自动获得焦点
disabled	disabled	指定应禁用按钮
form	form_id	指定按钮属于哪个表单
formaction	URL	指定提交表单时将表单数据发送到何处。仅适用于 type="submit"
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	指定表单数据在发送到服务器之前应如何编码。仅适用于 type="submit"
formmethod	get post	指定如何发送表单数据（使用哪种 HTTP 方法）。仅适用于 type="submit"
formnovalidate	formnovalidate	指定不应在提交时验证表单数据。仅适用于 type="submit"
formtarget	_blank _self _parent _top framename	指定提交表单后显示响应的位置。仅适用于 type="submit"
name	name	指定按钮的名称
type	button reset submit	指定按钮的类型
value	text	指定按钮的初始值

全局属性

<button> 标签支持 HTML 中的全局属性。

事件属性

<button> 标签支持 HTML 中的事件属性。

更多示例

使用 CSS 设置按钮样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    .button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }
    .button1 {background-color: #4CAF50;}
    .button2 {background-color: #008CBA;}
  </style>
</head>
<body>
  <button class="button button1">Green</button> <button class="button button2">Blue</button>
</body>
</html>

使用 CSS 设置按钮样式（带有悬停效果）：

<!DOCTYPE html>
<html>
<head>
  <style>
  .button { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; }
  .button1 { background-color: white; color: black; border: 2px solid #4CAF50; }
  .button1:hover { background-color: #4CAF50; color: white; }
  .button2 { background-color: white; color: black; border: 2px solid #008CBA; }
  .button2:hover { background-color: #008CBA; color: white; }
  </style>
</head>
<body>
  <button class="button button1">Green</button> <button class="button button2">Blue</button>
</body>
</html>

GitHub 上编辑此页 2022/05/14