[分享]css3提交按钮样式

CSS3 提供了丰富的样式选择器和属性，可以使提交按钮的样式更具吸引力和响应性。以下是一些有用的提交按钮样式代码示例：/ 纯CSS3悬浮效果 / button:hover { backgroundco...

CSS3 提供了丰富的样式选择器和属性，可以使提交按钮的样式更具吸引力和响应性。以下是一些有用的提交按钮样式代码示例：

/* 纯CSS3悬浮效果 */
button:hover {
  background-color: #4CAF50; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
}

/* 纯CSS3点击效果 */
button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* 点击改变按钮文字 */
button:active:after {
  content: "！";
}

/* 不同状态下的HTML提交按钮 */
<input type="submit" value="登 录" class="button-primary">
<input type="submit" value="登 录" class="button-disabled" disabled>

/* 使用CSS3制作渐变提交按钮 */
button {
  background: linear-gradient(to right, #ffafbd, #ffc3a0);
  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: 25px;
  transition: all 0.5s;
}

button:hover {
  background: linear-gradient(to right, #ffc3a0, #ffafbd);
} 

通过应用这些样式，可以增强提交按钮的外观和交互。这些代码示例以及更多 CSS3 提交按钮样式可以在CSS Tricks和W3Schools等网站上找到。