html 好看的按钮样式

以下是几种 HTML 好看的按钮样式：

1. 扁平化按钮样式

<button class="flat-btn">Flat Button</button>

<style>
.flat-btn {
  border: none;
  background-color: #008CBA;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}
</style>

2. 渐变按钮样式

<button class="gradient-btn">Gradient Button</button>

<style>
.gradient-btn {
  border: none;
  background: linear-gradient(to right, #FFC107, #FF9800);
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}
</style>

3. 阴影按钮样式

<button class="shadow-btn">Shadow Button</button>

<style>
.shadow-btn {
  border: none;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
.shadow-btn:hover {
  box-shadow: 0 12px 20px 0 rgba(0,0,0,0.2);
}
</style>

以上是几种 HTML 好看的按钮样式，你可以根据自己的需求进行选择和修改。