[分享]css3按钮提交中

CSS3按钮在页面中经常使用，特别是在表单提交中。在这里，我们将看到如何使用CSS3按钮和其提交功能来创建更漂亮的按钮样式。button { backgroundcolor: 4CAF50; / Gr...

CSS3按钮在页面中经常使用，特别是在表单提交中。在这里，我们将看到如何使用CSS3按钮和其提交功能来创建更漂亮的按钮样式。

button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #3e8e41;
}

button:active {
  background-color: #3e8e41;
  transform: translateY(4px);
}

button:focus {
  outline: none;
} 

上面的代码是一个样式化的按钮，添加了鼠标悬停和点击效果。您可以自由更改背景色和字体颜色，让它适合您的整体风格。

如果您想在提交表单时使用这个按钮，您可以将其放在表单元素中，如下所示：

<form>
  <input type="text" name="username" placeholder="Enter username"><br><br>
  <input type="password" name="password" placeholder="Enter password"><br><br>
  <button type="submit">Submit</button>
</form> 

当用户填写好用户名和密码后，点击提交按钮，表单将被提交到服务器端。

总之，使用CSS3按钮可以提高用户界面的设计性，使您的表单看起来更专业和更可定制。无论是在网页中简单地显示联系人表单，还是在复杂的电子商务网站中收集用户信息，通过样式化的按钮实现表单提交是很有用的。