css Question posted in
Some basic documentation can be found here.

CSS code to change the font color to gradient and button color to white

I’ve to make a button with background white & font color in gradient. I’ve done the css code, But it’s not working.

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>
Tags:

2

Answers


  1. 0

    I would suggest creating a button and then overlay it with a text (gradient-color)

    1. I intentionally changed the body background to yellow so that you can see the button is white in color (not transparent)

    2. I changed the gradient so it is from red to blue) – to better demonstrate the color gradient (but you can use your own colors)

    button {
background-color: #FFFFFF; /* Green */
color: white;
border:1px solid #AAAAAA;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
}

.button1
{position:absolute;
  left:0px;
  top:0px;
  width:150px;
  height:20px;
}

.rainbow-text {
  background-image: linear-gradient(45deg, #FF0000, #00FF00);   -webkit-background-clip: text;
  color: transparent;
}

.text1 {
position:absolute;
left:0px;
top:0px;
width:150px;
height:20px;
text-align:center;
vertical-align:middle;
}

.container{
  position:relative;
  width:100px;
  }
    <body style="background-color:yellow;width:auto;height:auto;">
    <div class=container>
    <button class="button1">
        <div  class="rainbow-text text1">StackOverflow</div>
    </button>
    </div>
</body>
    Login or Signup to reply.
  2. 0

    First of all you can not use linear-gradient as a color but you can try like this.

    button {
  background: #fff; 
  font-weight: 600;
  color: transparent; 
  background-clip: text; 
  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;
}
    <button>
Hey
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search