javascript - 在css中制作具有悬停效果的渐变背景按钮

Question

虽然这似乎是一个基本问题，但我无法找到该问题的解决方案。我想要的是像这样的渐变背景按钮( https://prnt.sc/r0mx54 )。当用户将鼠标悬停在该按钮上时，我想要这种行为( https://prnt.sc/r0mxtj )。现在的问题是我可以通过将背景颜色从渐变更改为任何正常颜色(在本例中为白色)来实现此效果。但是，当我尝试通过将背景设置为透明或继承来实现这种效果时，我无法做到这一点。这是我的代码。请帮忙。 普通按钮具有渐变背景颜色。悬停按钮具有渐变边框、透明背景色。

.flex {
  display: flex;
  flex-wrap: wrap;
}

.border-radius-20 {
  border-radius: 20px;
}

.uppercase {
  text-transform: uppercase;
}

.color-white {
  color: #fff;
}

.all-center {
  align-items: center;
  justify-content: center;
}

.bg-gradient {
  background: linear-gradient(to right, #049eca, #12adb8, #1cb8aa 70%);
}

li {
  padding: 2px;
}

li:hover a {
  background: #fff;
}

<ul>
  <li class="flex relative all-center border-radius-20 bg-gradient">
    <a href="#" class="pd-8-10 border-radius-20 bg-gradient color-white uppercase">Schedule a Meeting</a>
  </li>
</ul>

Answer 1

请检查这个简单的方法

<input type="button" class="button" value="Schedule a meeting"/>

.button {
    background-color: #059fc9;
    background-image: linear-gradient(to right, #059fc9, #1cb8aa);
    box-shadow: none;
    border: none;
    border-radius: 25px;
    height: 40px;
    padding: 0px 15px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
.button:hover {
    cursor: pointer;
    color: #1cb8aa;
    border: 2px solid #1cb8aa;
    background: transparent;
}