"Link as a button on hover - like Google"
Bootstrap 3.1.0 Snippet by Pyrax

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
<a href=# class="btn btn-xs link-btn">Comme hover me</a>
<a href=# class="btn btn-sm link-btn">or me</a>
<a href=# class="btn btn-md link-btn">hey me also</a>
<a href=# class="btn btn-lg link-btn">oh! and me</a>
<br>
Nice also with icons :
<a href=# class="btn btn-sm link-btn"><span class="glyphicon glyphicon-thumbs-up"></span></a>
<a href=# class="btn btn-sm link-btn"><span class="glyphicon glyphicon-thumbs-down"></span></a>
<a href=# class="btn btn-sm link-btn"><span class="glyphicon glyphicon-check"></span></a>
<hr>
If you like I can do the same with more custom colors (primary, warning, etc.) - Please tell me in comments.
<br>Benjamin
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.link-btn {
font-weight: normal;
color: #333333;
cursor: pointer;
}
.link-btn:hover,
.link-btn:focus,
.link-btn:active,
.link-btn.active,
.open .dropdown-toggle.link-btn {
color: #333333;
background-color: #ebebeb;
border-color: #adadad;
}
.link-btn:active,
.link-btn.active,
.open .dropdown-toggle.link-btn {
background-image: none;
}
.link-btn.disabled,
.link-btn[disabled],
fieldset[disabled] .link-btn,
.link-btn.disabled:hover,
.link-btn[disabled]:hover,
fieldset[disabled] .link-btn:hover,
.link-btn.disabled:focus,
.link-btn[disabled]:focus,
fieldset[disabled] .link-btn:focus,
.link-btn.disabled:active,
.link-btn[disabled]:active,
fieldset[disabled] .link-btn:active,
.link-btn.disabled.active,
.link-btn[disabled].active,
fieldset[disabled] .link-btn.active {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro
Hexa shape button
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments: