One of the essential parts of a website is a text link. By clicking an anchor tag you can go anywhere from the site as it points to a specific page.

Typical links contain simple hover effects such as use of a simple color change when the mouse is pointed or clicked. But there are ways to make this effect even better.

Today, we'll going to show you how to create awesome links using new features of CSS3: transition and transform. At the end of this tutorial you’ll have cool link hover effect that will surely rock your navigation.

The first demo will have a simple effect so that when you hover your mouse, a three-pixel border will come out from the back of the box container of the link text.

The HTML

Our markup will simply contain an HTML5 nav tag which holds all of the links on our demo. On each anchor tag there is class box and demo-1. We will also place font-awesome icons before the link to make a cool design.

<nav>
      <a href="demo1.html" class="box demo-1"> <i class="fa fa-hand-o-right"></i> <span>Demo 1</span> </a>
      <a href="demo2.html" class="box demo-1"> <i class="fa fa-hand-o-up"></i> <span>Demo 2</span></a>
      <a href="demo3.html" class="box demo-1"> <i class="fa fa-hand-o-left"></i>  </i> <span>Demo 3</span></a>
      <a href="demo4.html" class="box demo-1">  <i class="fa fa-thumbs-o-up"></i> <span>Demo 4</span></a>
</nav>

The CSS

For our CSS, we will use the ::before and ::after selector to insert a 3 pixel border when the mouse was hovered to the anchor tag element. To make the effect smooth, we will use CSS3 transition.

.box{
  color: #fff;
  padding: 10px;
}
 
.box:hover{
  background: #fff;
  color: #26425E;
}
 
.demo-1 {
  position: relative;
}
 
.demo-1:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
 
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.2s;
 
  -webkit-transition-property: top, left, right, bottom;
  -moz-transition-property: top, left, right, bottom;
  -ms-transition-property: top, left, right, bottom;
  -o-transition-property: top, left, right, bottom;
  transition-property: top, left, right, bottom;
}
 
.demo-1:hover:before, .demo-1:focus:before{
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  -ms-transition-delay: .1s;
  -o-transition-delay: .1s;
  transition-delay: .1s; 
 
  border: #fff solid 3px;
  bottom: -7px;
  left: -7px;
  top: -7px;
  right: -7px;
}

Read more:http://designmodo.com/css3-hover-effects/