使 Bootstrap 按钮透明

Question

如何使我的按钮透明？我一直在尝试使用 .btn-transparent 但似乎无法让它工作。该按钮一直变灰。

<p>
    <!-- Search Button -->
    <div class="container3">
        <div class="btn-group ">
            <button type="button" class="btn btn-primary-outline">SEARCH</button>
            <button type="button" class="btn btn-primary-outline">
                <span class="glyphicon glyphicon-menu-right"></span>
            </button>
        </div>
    </div>
</p>

Answer 1

使css变为.btn-primary-outline

这样的例子：https://jsfiddle.net/472cxwg9/

Answer 2

使用

class="btn" and style="background-color:transparent"

代替

 class="btn btn-primary-outline"

结果

Answer 3

在bootstrap3中我补充说：

.btn-primary-outline {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

收件人：

<div class="col-xs-3" style="margin-top: 25px;">
<button type="button" class="btn btn-primary-outline">
<span style="display: inline; font-size: 30px; color: #007bff;" class="material-icons save">
</span>&nbsp;
</button>
</div>

Answer 4

您可以在 Bootstrap 4 中执行此操作而无需任何 in-line 样式

<button type="button" class="btn bg-transparent btn-outline-primary"></button>

Answer 5

Bootstrap 4引入按钮link样式：.btn-link:

Deemphasize a button by making it look like a link while maintaining button behavior

<button type="button" class="btn btn-link">Link</button>

.btn-link class 已将 background-color 设置为 background-color: transparent;（按钮边框也是透明的 border-color: transparent;）。

使 Bootstrap 按钮透明

Make Bootstrap Button Transparent

css

html

twitter-bootstrap-4