title: Can't reset button color via javascript CSS
body: <p>I can change the color of a button in javascript using the CSS backgroundImage linear-gradient, that works but it does not work when I use the same technique to try to reset back to the original state.</p>
  <p>What am I missing?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var darkened=false;
  
  function toggle() {
  
    if (darkened) {
        console.log("lightening button");
        document.getElementById("scrollbutton").style.backgroundImage = "linear-gradient(rgb(222, 222, 222), rgb(255, 255, 255));";
  
    } else {
  
        console.log("darkening button");
        document.getElementById("scrollbutton").style.backgroundImage = "linear-gradient(rgb(99, 99, 99), rgb(166, 166, 166))";
    }
  
    darkened = ! darkened;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;button style="background-image: linear-gradient(rgb(222, 222, 222),rgb(255, 255, 255));" id="scrollbutton" onclick="toggle();"&gt; pressme&lt;/button&gt;
  
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>