将字体颜色更改为渐变并将按钮颜色更改为白色的 CSS 代码

Question

我必须制作一个背景为白色且字体颜色为渐变的按钮。我已经完成了CSS代码，但它不起作用。

button {
  background: #fff;
  font-weight: 600;
  color: linear-gradient(90deg, #ff5759, #ff57cc);
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  border: 2px solid transparent;
  transition: 0.3s ease;
}

<div class="container">
  <form action="#">
    <h2>SIGN UP</h2>
    <div class="input-group">
      <input type="text" id="username" name="username" required>
      <label for="username">Username</label>
    </div>
    <div class="input-group">
      <input type="text" id="email" name="email" required>
      <label for="email">Email</label>
    </div>
    <div class="input-group">
      <input type="password" id="password" name="password" required>
      <label for="password">Password</label>
    </div>
    <div class="input-group">
      <input type="password" id="re-enter_password" name="re-enter_password" required>
      <label for="re-enter_password">Re-Enter Password</label>
    </div>
    <button type="submit">Sign Up</button>
    <div class="create-account">
      <p>Already have an account? <a href="#">Log in</a></p>
    </div>
  </form>
</div>

Answer 1

对于按钮，您需要使用

background-image

所以尝试以下方法：

<style>

button {
  background: #fff; 
  font-weight: 600;
  background-image: linear-gradient(90deg, #ff5759, #ff57cc);
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  border: 2px solid transparent;
  transition: 0.3s ease;
}

</style>

<button type="submit">Sign Up</button>