自定義引導鏈接只顯示爲懸停按鈕

Question

我想知道如何自定義引導按鈕樣式，使它們看起來像一個鏈接，只有懸停，看起來像一個按鈕。

我所說的一個例子就是任何關鍵字搜索的結果頁面都可以訪問的Google按鈕「搜索工具」。

Answer 1

我已經試過這http://jsfiddle.net/fkwE7/6/使用引導.btn和.btn鏈接類。

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> 

Answer 2

你有一些選擇：

（1）如果您想自定義這些按鍵會怎麼看，你可以有一個標準的鏈接，並使用:hover給它一個按鈕的外觀。您可以使用JavaScript來更改類，或者，以便鏈接將獲得Bootstrap的按鈕CSS屬性。 （2）你可以用你自己的方式覆蓋Bootstrap中的類。您將把所有CSS從按鈕類移到：將鼠標懸停並自定義爲顯示爲鏈接的類。 （3）關注Google - Google的'搜索工具'只是一個鏈接，其中包含：hover和：active屬性，爲其提供背景顏色和按鈕邊框以及顯示類似於按下按鈕的內容。可能有一個onclick或click事件跟蹤鏈接是否被點擊，最終添加或刪除負責保持鏈接背景顏色變暗的CSS類。您明顯可以參考Bootstrap的CSS來了解要使用的屬性。

Answer 3

這個怎麼樣..

<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