<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="wrapper">
  <h1>CSS Border Animation</h1>
  <p>A simple but useful effect to use in your projects</p>
  <p class="small">Compatible for Chrome, Firefox, Opera and IE</p>
  <ul class="items"> 
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    <li><a href="#">Link 7</a></li>
  </ul>
</div>
body{
  background-color:#34495E;
}

.wrapper{
  width:1000px;
  margin:0 auto;
}

h1{
  color:#FFF;
  text-shadow:#000 0px 0px 1px;
  font-weight:300;
  font-family:"Century Gothic";
  text-align:center;
  margin-top:50px;
}

p{
  color:#FFF;
  text-shadow:#000 0px 0px 1px;
  font-family:"Century Gothic";
  text-align:center;
}

.items{
  margin-top:50px;
}

.items li{
  float:left;
  padding:20px 35px 20px 35px;
  list-style:none;
  border:5px solid rgba(255,255,255,0.2);
  margin-left:10px;
  -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4)));
}

.items li:hover{
  border:5px solid rgba(255,255,255,1);
  -webkit-transition:all ease-in 0.3s;/*Chrome*/
  -moz-transition:all ease-in 0.3s;/*Firefox*/
  -o-transition:all ease-in 0.3s;/*Opera*/
  -ms-transition:all ease-in 0.3s;/*Microsoft*/
}

.items li a{
  color:#FFF;
  text-decoration:none;
  font-family:"Oswald";
  text-transform:uppercase;
  font-size:14px;
}

.small{
  font-size:12px;
  color:#999;
}
//REFLECTIVE IN CHROME!

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.