具有垂直渐变背景的箭头按钮

<button class="gradient-button">
  <span class="arrow-icon"></span>
  按钮文本
</button>

.gradient-button {
  background: linear-gradient(to bottom, #ff0000, #00ff00);
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.arrow-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url(arrow-icon.png);
  /* 设置箭头图标的背景图片 */
  background-size: cover;
  /* 调整箭头图标的大小 */
  margin-right: 5px;
  /* 调整箭头图标与按钮文本的间距 */
}