SOURCE

<div>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Gallery</a></li>
  </ul>
  
</div>

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	               }
body {
	margin: 0;
	padding: 0;
	background-color: #eaf7fd;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
}

ul {
    list-style-type:none;
}
li {
      text-transform: uppercase;
      width: 200px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin-top: 10px;
      
}
li a{
  
  display: block;
  text-decoration: none;
  border: 1px solid #d91222;
  color: #fff;
  -moz-box-shadow: 200px 0 #d91222 inset;
  box-shadow: 200px 0 #d91222 inset; /* background-color也可以实现 */
  webkit-transition: box-shadow 0.3s;
  -moz-transition: box-shadow 0.3s;
  -o-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  border-radius: 5px; 
}
li a:hover{
  box-shadow: 5px 0 #d91222 inset;
  color: #d91222;
}