<h1>Simple Multi-directional button animation CSS</h1>
<ul>
  <li>Bottom</li>
  <li>Top</li>
  <li>Right</li>
  <li>Left</li>
</ul>
h1{text-align: center; font-family:Arial, sans-serif; margin-bottom:50px; color:#4D4D50}
ul{max-width:800px; margin:auto}
ul li{display:inline-block; width:24%; color: #C2c2c2; padding:20px 0; color:#000; text-align:center; transition:linear 0.7s; font-family:Arial, sans-serif;
border: 1px solid #C2c2c2}
ul li:hover:first-child{box-shadow:inset 0 -150px 1px #0077B5;  color:#fff}
ul li:hover:nth-child(2){box-shadow:inset 0 150px 1px #0077B5;  color:#fff}
ul li:hover:nth-child(3){box-shadow:inset -300px 0px 1px #0077B5;  color:#fff}
ul li:hover:nth-child(4){box-shadow:inset 300px 0px 1px #0077B5;  color:#fff}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.