Custom Bootstrap's link to show as a button on hover only

I would like to know how can I custom Bootstrap buttons style to make them look like a link and, on hover only, look like a button.

An example of what I'm saying is the Google's button "Search tools" accessible in the result page of any keyword search.

Answers


I have tried this http://jsfiddle.net/fkwE7/6/ using bootstrap .btn and .btn-link classes.

CSS :

.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,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #ffffff;
  border-color: #cccccc;
}

HTML :

<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>
    </div>
</div>

How about this..

<a class="btn btn-default btn-lnk" href="#">Text</a>

CSS..

.btn-lnk {
    border-width:0;
}
.btn-lnk:hover {
    border-width:1px;
}  

http://bootply.com/111834


You have some options:

(1) If you want to customize how these buttons will look, you can just have a standard link and use :hover to give it the appearance of a button. You could use JavaScript to change the class, alternatively, so that a link would get Bootstrap's button CSS properties.

(2) You override the classes in Bootstrap with your own. You'll move all the CSS from the button classes to :hover and customize the classes to appear as links.

(3) Follow Google - Google's 'Search Tools' is just a link that has :hover and :active properties to give it the background color and border of a button as well as display what resembles pressing a button. There's probably an onclick or click event that's keeping track of whether the link has been clicked, which ultimately adds or removes the CSS class responsible for keeping the link background color darkened. You can obviously refer to Bootstrap's CSS for what properties to use.


Need Your Help

Add field to Crystal Report

c# crystal-reports

i have created a crystal report, in that i have missed one field at the design time, now i realized that and trying to insert, but the value is not displayed while the report will open. what is the

How to parse json when entire string is enclosed in brackets

php jquery json

My json comes back from my PDO MySQL query as an associative array, as I intended, with the exception that the entire string is surrounded by two enclosing brakets. I'm not sure how to get around the