title: Css button box-shadow transition
body: <p>I'm having some trouble with making an transition effect on a button.</p>
  
  <p>Using "box-shadow" I am able to create this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.load {
   color:black;
   border:none;
   background-color: #ffffff;
   width: 100px;
   height: 30px;
   margin-left: 21px;
   box-shadow: inset 0 0 0 0 #000000;
   transition-duration: 0.3s;
   transition-timing-function: ease-in;
  
  }
  .load:hover {
   transition-duration: 0.3s;
   box-shadow: inset 0 -3px 0 0 #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;button class="load"&gt; Home
     &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The shadow comes from the bottom and 3px into the button. I want it to be able to come from left to right, but still remaining at the 3px height.</p>
  
  <p>I'm also pretty sure this website got it working, but i'm not able to extract the required CSS from inspecting it. </p>
  
  <p><a href="http://greyos.blogspot.com.au/p/privacy.html" rel="nofollow">Website</a></p>
  
  <p>Thanks!</p>