title: Using percentage values with background-position on a linear-gradient
body: <p>Is there any way to make <code>background-position</code> take percentage values? Currently my button only works with an explicit values for <code>width</code> and <code>background-position</code>.</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-css lang-css prettyprint-override"><code>body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
    font-weight: bold;
    width: 350px;
    height: 50px;
    border: 1px solid green;
    transition: background 0.5s;
    background-repeat: no-repeat;
    background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
  }
  .button-pixel {
    background-position: -350px 0px, 0px 0px;
  }
  .button-pixel:hover {
    background-position: 0px 0px, 350px 0px;
  }
  .button-percentage {
    background-position: -100% 0px, 0px 0px;
  }
  .button-percentage:hover {
    background-position: 0% 0px, 100% 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" class="button button-pixel"&gt;In Pixel&lt;/a&gt;
  &lt;a href="#" class="button button-percentage"&gt;In Percentage&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>