<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <br> <ul class="final"> <li><a href="#">HOVER</a></li> </ul> </div> </div>

ul.final li { list-style-type:none; float:left; padding-left:30px;} ul.final li a { text-decoration:none; position:relative; padding:8px 15PX;color:red;font-size:18px;} ul.final li a:before { border-left:2px solid #000; border-right:2px solid #000; transform:scale(1,0);} ul.final li a:after { border-top:2px solid #000; border-bottom:2px solid #000; transform:scale(0,1);} ul.final li a:before, ul.final li a:after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; transition:opacity 0.35s ease, transform 0.35s ease;} ul.final li a:hover:before, ul.final li a:hover:after { opacity:2; transform:scale(1);}