<h1>Css button hover effects - box-shadow inset</h1>
<p> By <a href="https://twitter.com/JesGraPa" target="_blank">@JesGraPa</a> - <a href="https://codepen.io/JesGraPa/" target="_blank">More Pens</a></p>
<p>Thanks all for <strong>200 +</strong> hearts!!!!</p>
<span class="btn-right">Hover Me</span>
<span class="btn-left">Hover Me</span>
<hr/>
<span class="btn-top">Hover Me</span>
<span class="btn-bottom">Hover Me</span>
<hr/>
<span class="btn-special3">Hover Me</span>
<span class="btn-special4">Hover Me</span>
<hr/>
<span class="btn-special1">Hover Me</span>
<span class="btn-special2">Hover Me</span>
<hr>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*{ text-decoration: none; margin: 0; padding:0; margin-bottom: 30px; color:#333; box-sizing:border-box;}
body{  font-family:'Open Sans'; text-align:center; background:#B1DFDB; width:100%; height:100%; padding-top:40px; display:block; position:relative; font-size:18px;}
hr{ border:0;}
p{ font-size: 13px;}
/*general*/
span{ cursor:pointer; clear:both;  border-radius: 3px; padding:20px 60px; display:inline-block; margin:0 20px; transition:all 0.8s, color 0.3s 0.3s; cursor:pointer; background:#9ACC5F; color:#333;}
/*general hover*/
a:hover, span:hover{ color:#fff;}
/*effects*/
.btn-left:hover{ box-shadow:300px 0 0 0 rgba(0,0,0,0.5) inset;}
.btn-right:hover{ box-shadow:-300px 0 0 0 rgba(0,0,0,0.5) inset;}
.btn-top:hover{box-shadow:0 150px 0 0 rgba(0,0,0,0.5) inset;}
.btn-bottom:hover{box-shadow:0 -150px 0 0 rgba(0,0,0,0.5) inset;}
.btn-special1:hover{box-shadow:0 0 0 10px rgba(0,0,0,0.5) inset;}
.btn-special2:hover{box-shadow: 0 0 0 10px #9ACC5F inset, 0 0 0 150px rgba(0,0,0,0.5) inset;}
.btn-special3:hover{box-shadow: 300px 0 0 0  rgba(0,0,0,0.25) inset, -300px 0 0 0  rgba(0,0,0,0.25) inset;}
.btn-special4:hover{box-shadow: 0 80px 0 0  rgba(0,0,0,0.25) inset, 0 -80px 0 0  rgba(0,0,0,0.25) inset;}

//NOOUP