使引导按钮透明

Posted 2023-03-05

【中文标题】使引导按钮透明

【英文标题】：Make Bootstrap Button Transparent

【发布时间】：2016-11-24 10:18:31

【问题描述】：

如何使我的按钮透明？我一直在尝试使用 .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>

【问题讨论】：

你不能自己上课吗？

您使用哪个引导程序版本？我的意思是“btn-primary-outline”是 bootstrap4(v4-alpha) 的类。这个类不能在 bootstrap3 中工作。

在任何版本的 Bootstrap 中都没有 btn-transparent 类。

【参考方案1】：

将css制作成.btn-primary-outline

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

【讨论】：

这正是我想要做的。谢谢！

2017 年 5 月 11 日更新：BS v4-Alpha 中的正确类实际上是 btn-outline-primary。

【参考方案2】：

使用

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

而不是

 class="btn btn-primary-outline"

结果

【参考方案3】：

在引导程序 3 中我添加了：

.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>

【参考方案4】：

您可以在 Bootstrap 4 中执行此操作而无需任何内联样式

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

【参考方案5】：

Bootstrap 4介绍按钮链接样式：.btn-link：

在保持按钮行为的同时使按钮看起来像一个链接，从而淡化按钮的重要性

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

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

【讨论】：

这看起来不再像一个按钮了。 OP 询问如何使背景透明并正在添加轮廓样式。