重置提交 btn 样式 - CSS

在Web开发中，表单是一个常见的元素，表单中的提交按钮也是必不可少的。提交按钮的样式有时候需要根据设计要求进行自定义，但是默认的提交按钮样式又不够美观，这时候我们需要对提交按钮进行样式重置。

重置提交按钮样式的方式

1. 使用CSS3属性

我们可以使用CSS3的属性来对提交按钮的外观进行自定义，例如background、border、font-size、color等属性可以进行修改。以下是一个样式重置的示例代码：

button[type="submit"] {
  background: #00a2e8;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

上面的代码将提交按钮的背景色改为蓝色，字体颜色为白色，去掉了默认的边框，设置了字体大小、鼠标样式、内部填充、圆角和阴影。

2. 使用框架

如果是使用框架进行前端开发，例如Bootstrap、Semantic UI等，我们可以直接使用这些框架提供的样式来对提交按钮进行自定义。以Bootstrap为例，可以使用btn类和btn-primary类来对提交按钮进行样式设置：

<button type="submit" class="btn btn-primary">提交</button>

总结

重置提交按钮样式是前端开发中的一个常见需求，通过使用CSS属性或框架提供的样式可以轻松地实现。样式重置的示例代码和使用框架的代码如下：

/* 样式重置示例代码 */
button[type="submit"] {
  background: #00a2e8;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

/* 使用Bootstrap框架 */
<button type="submit" class="btn btn-primary">提交</button>

以上就是重置提交按钮样式的介绍，希望对大家有所帮助。