How do I put the CSS Gradient in the 'background-color'?

Question

I am trying to make it where when you hover over a button, the background shifts from plain gray to a CSS styled Gradient thing..... It all works, other than the fact of when I hover over the button, the background stays gray, instead of changing to the Gradient.(Im not good with wording sentences, sorry) But I tried to do this and it didn't work, so if you can help me out I would appreciate it.

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css'/>
  <script src='script.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
  <div class='TopBar'>
    <div id='TopBar_Nav'>
      <center>

      <input type='button' class='TBNP' id='TBN-1' value='Player Statistics'>
      <!---->
      <input type='button' class='TBNP' id='TBN-2' value='Player Inventory'>

      </center>
    </div>
  </div>

  <div class='Main'>

  </div>
</body>
</html>

CSS:

.TBNP {
  border-radius: 4px;
  border: 1px solid black;
  color: gray;
  background-color: #EDEDED;
  transition: 0.5s;
}

.TBNP:hover {
  border-radius: 10px;
  color: black;
  border: 1px solid black;
  background-color: linear-gradient(to bottom right, red, yellow);
  cursor: pointer;
}

score 2 · Accepted Answer · answered Jan 17 '16 at 19:35

2

linear-gradient should be used with background-image, not background-color.

answered Jan 17 '16 at 19:35

Rafi

816
9
21

Thanks that helps, but it still doesnt solve the problem that it goes straight from gray to the gradient. I was asking, if possible, how to get it to transition from gray to gradient slowly. – Johnathan Seelentag Jan 17 '16 at 19:37
That's a more difficult problem. You would probably have to apply the gradient to a pseudo-element that sits behind your `.TBNP`, and then transition the background of `.TBNP` from gray to transparent. – Rafi Jan 17 '16 at 19:40

score 2 · Answer 2 · edited May 23 '17 at 12:15

Use background-image instead of background-color for gradients.

.TBNP {
  border-radius: 4px;
  border: 1px solid black;
  color: gray;
  background-color: #EDEDED;
  transition: 0.5s;
}

.TBNP:hover {
  border-radius: 10px;
  color: black;
  border: 1px solid black;
  background-image: linear-gradient(to bottom right, red, yellow);
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css'/>
  <script src='script.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
  <div class='TopBar'>
    <div id='TopBar_Nav'>
      <center>

      <input type='button' class='TBNP' id='TBN-1' value='Player Statistics'>
      <!---->
      <input type='button' class='TBNP' id='TBN-2' value='Player Inventory'>

      </center>
    </div>
  </div>

  <div class='Main'>

  </div>
</body>
</html>

For gradient transition, see Use CSS3 transitions with gradient backgrounds.

How do I put the CSS Gradient in the 'background-color'?

2 Answers2