Question

我想知道如何自定义Bootstrap按钮样式，使它们看起来像一个链接，并且仅在悬停时，看起来像一个按钮。

我所说的一个例子是Google的按钮“搜索工具”，可在任何关键字搜索的结果页面中访问。

Answer 1

我使用bootstrap .btn和.btn-link类尝试了这个http://jsfiddle.net/fkwE7/6/。

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

这个怎么样..

<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

Answer 3

你有一些选择：

（1）如果您想自定义这些按钮的外观，您可以只使用标准链接并使用:hover为其提供按钮外观。您可以使用JavaScript来更改类，或者使链接获得Bootstrap的按钮CSS属性。

（2）您可以使用自己的类覆盖Bootstrap中的类。您将把按钮类中的所有CSS移动到：悬停并自定义类以显示为链接。

（3）关注谷歌 - 谷歌的“搜索工具”只是一个链接，它具有：悬停和：活动属性，为其提供按钮的背景颜色和边框，以及显示类似于按下按钮的内容。可能有一个onclick或click事件，它跟踪链接是否被点击，最终添加或删除了负责保持链接背景颜色变暗的CSS类。显然，您可以参考Bootstrap的CSS来了解要使用的属性。

自定义引导程序的链接仅在悬停时显示为按钮

3 个答案: