title: CSS diagonal mousemove fill on hover
body: <p>I'm trying to fill a button with a diagonal effect on the mousemove (so the button is filled where the mouse is)</p>
  
  <p>I have the effect of a diagonal fill on a hover:</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>.demo {
    text-align: center;
    margin-top: 150px;
  }
  .mt {
    margin-top: 20px;
  }
  .small {
    width: 120px;
  }
  .medium {
    width: 160px;
  }
  .large {
    width: 230px;
  }
  .extra-large {
    width: 360px;
  }
  .diagonal {
    position: relative;
    display: inline-block;
    line-height: 50px;
    border: 1px solid black;
    color: black;
    background: white;
    font-weight: book;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
    z-index: 1;
    padding: 0px;
  }
  .diagonal:after {
    content: "";
    position: absolute;
    top: 30;
    left: 0;
    width: 500%;
    height: 1000%;
    background: #F5FF35;
    z-index: -1;
    transform-origin: 0% 0%;
    transform: translateX(calc(-130% - 0px)) translateY(10%) rotate(45deg);
    transition: transform 1s;
  }
  .diagonal:hover::after {
    transform: translateY(-100%) translateX(-50px) rotate(45deg);
    direction: ltr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="demo"&gt;
    &lt;a class="mt small diagonal"&gt;Click me!&lt;/a&gt;&lt;br&gt;
    &lt;button class="mt medium diagonal"&gt;Click me!&lt;/button&gt;&lt;br&gt;
    &lt;button class="mt large diagonal"&gt;Click me!&lt;/button&gt;&lt;br&gt;
    &lt;button id="demo" class="mt extra-large diagonal"&gt;Click me!&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/anon/pen/VPqBoR" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>But I can't set it up on a mousemove, I have found something similar from an other question, <a href="https://jsfiddle.net/sdq5z7ej/1/" rel="nofollow noreferrer">fiddle</a>. </p>
  
  <p>Basically, I am trying to fit the codepen and the jsfiddle together</p>
  
  <p>I tried to rotate the div in the jsfiddle but the fill effect would be all over instead of only the start, plus it would not cover the whole area..</p>