HTML表单按钮是网页中非常常见的元素，它们通常用于提交表单数据，为了提高用户体验，我们通常会对表单按钮进行样式设置，使其看起来更加美观和吸引人，在这篇文章中，我们将详细介绍如何使用CSS来设置HTML表单按钮的样式。

html表单按钮如何设置样式html表单按钮如何设置样式（图片来源网络，侵删）

1、内联样式

最简单的方式是通过内联样式直接在HTML元素中设置样式。

<button style="backgroundcolor: red; color: white; border: none; padding: 10px 20px; fontsize: 16px;">提交</button>

在这个例子中，我们设置了按钮的背景颜色、文字颜色、边框、内边距和字体大小。

2、内部样式表

内部样式表是将CSS代码放在HTML文档的<head>标签内的<style>标签中，这种方式适用于较小的项目，因为它将所有样式集中在一个地方。

<!DOCTYPE html>
<html>
<head>
<style>
button {
  backgroundcolor: red;
  color: white;
  border: none;
  padding: 10px 20px;
  fontsize: 16px;
}
</style>
</head>
<body>
<button>提交</button>
</body>
</html>

在这个例子中，我们将所有的按钮样式都放在了<style>标签内，这样，所有<button>元素都会应用这些样式。

3、外部样式表

外部样式表是将CSS代码放在一个单独的文件中，然后在HTML文档的<head>标签内使用<link>标签链接，这种方式适用于较大的项目，因为它可以将样式与HTML内容分离，使代码更加整洁。

创建一个名为styles.css的CSS文件：

button {
  backgroundcolor: red;
  color: white;
  border: none;
  padding: 10px 20px;
  fontsize: 16px;
}

在HTML文档中使用<link>标签链接这个CSS文件：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>提交</button>
</body>
</html>

在这个例子中，我们将所有的按钮样式都放在了styles.css文件中，并在HTML文档中使用<link>标签链接，这样，所有<button>元素都会应用这些样式。

4、CSS选择器

除了基本的样式设置外，我们还可以使用CSS选择器来为不同类型的按钮设置不同的样式，我们可以为不同类型的按钮设置不同的背景颜色：

<!DOCTYPE html>
<html>
<head>
<style>
button {
  backgroundcolor: red;
  color: white;
  border: none;
  padding: 10px 20px;
  fontsize: 16px;
}
input[type="submit"] {
  backgroundcolor: blue;
}
</style>
</head>
<body>
<button>普通按钮</button>
<br><br>
<form action="/submit" method="post">
  <input type="text" name="username" placeholder="用户名">
  <br><br>
  <input type="password" name="password" placeholder="密码">
  <br><br>
  <input type="submit" value="提交表单">
</form>
</body>
</html>

在这个例子中，我们使用了CSS选择器input[type="submit"]来为提交表单的输入框设置不同的背景颜色，这样，提交表单的按钮就会显示为蓝色，而不是红色。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。