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

<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>
.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 { background-color: #ffffff; border-color: #cccccc; }

Related: See More


Questions / Comments: