button的不同样式

1. 渐变背景
css
button {
  background: linear-gradient(to right, #ff5733, #ff7043); /* 线性渐变背景 */
}
2. 阴影效果
css
button {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
3. 过渡动画
css
button {
  transition: background-color 0.3s ease; /* 背景色过渡动画 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时改变背景色 */
}
4. 伪元素效果（如箭头、图标）
css
button::after {
  content: '>'; /* 伪元素内容 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}
5. 禁用状态
css
button:disabled {
  background-color: #ccc; /* 禁用时改变背景色 */
  color: #999; /* 禁用时改变文字颜色 */
  cursor: not-allowed; /* 禁用时鼠标悬停效果 */
}
6. 焦点状态
css
button:focus {
  outline: none; /* 去除默认的焦点轮廓 */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* 自定义焦点轮廓 */
}
7. 活跃状态（鼠标按下时）
css
button:active {
  transform: scale(0.98); /* 按下时稍微缩小 */
  box-shadow: none; /* 按下时去除阴影 */
}