"hover effect"
Bootstrap 3.0.0 Snippet by sumi9xm

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
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);}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Dashboard PRO
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: