用div与button标签作为按钮的一些区别

最新推荐文章于 2025-06-20 16:58:11 发布

原创最新推荐文章于 2025-06-20 16:58:11 发布 · 1.1w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css

html 同时被 2 个专栏收录

12 篇文章

订阅专栏

css

8 篇文章

订阅专栏

本文探讨了HTML中button与div元素作为按钮使用时的差异，包括默认样式、box-sizing属性、cursor属性、点击动画等方面，揭示了两者在功能与交互上的细微差别。

如果button在form表单内部，则可以不用JS绑定onclick属性就可以提交表单内容；
而如果不在form表单内部，又不考虑语义化，那么作为按钮，用div和button来写按钮似乎就没什么太多的区别，只存在一些外观上的细微区别。
button标签的外观如下：
在这里插入图片描述
下面分别对button和div进行同样的css修饰：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="button.css">
</head>
<body>
	<button>按钮1</button>
	<div>按钮2</div>
</body>
</html>

*{
	padding: 0;
	margin: 0;
	margin-bottom:5px;
}

button{
	height: 50px;
	width: 200px;
	color: #fff;
	background-color: #00BFFF;
	line-height: 50px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	border: 1px solid #1E90FF;
	border-radius: 4px;
}

div{
	height: 50px;
	width: 200px;
	color: #fff;
	background-color: #00BFFF;
	line-height: 50px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	border: 1px solid #1E90FF;
	border-radius: 4px;
}