CSS 渐变按钮

css:

.gradient-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin: 10px;
  transition: all 0.3s ease;
}

.gradient-btn-1 {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

.gradient-btn-1:hover {
  background: linear-gradient(45deg, #fad0c4, #ff9a9e);
}

.gradient-btn-2 {
  background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
}

.gradient-btn-2:hover {
  background: linear-gradient(45deg, #c2e9fb, #a1c4fd);
}

.gradient-btn-3 {
  background: linear-gradient(45deg, #84fab0, #8fd3f4);
}

.gradient-btn-3:hover {
  background: linear-gradient(45deg, #8fd3f4, #84fab0);
}

html:

<button class="gradient-btn gradient-btn-1">渐变按钮1</button>
<button class="gradient-btn gradint-btn-2">渐变按钮2</button>
<button class="gradient-btn gradient-btn-3">渐变按钮3</button>

演示：