Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make Bootstrap Button Transparent

Tags:

How do I make my button transparent? I have been trying to use .btn-transparent but cant seem to get it to work. The button just keeps turning grey.

<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>
like image 484
James Avatar asked Jul 21 '16 02:07

James


People also ask

How do I make a button transparent in Bootstrap?

The <button> tag is used to specify the button element in HTML, which gets executed on pressed. btn – On mentioning the btn property, specifies that its a bootstrap button. bg – Specifies the background color of the button. transparent – Makes the button transparent.

How do you make a button transparent?

CSS Code: In this section, we will design the button using CSS property. We will use the background-color: transparent; property to set the button with transparent look. Complete Code: In this section, we will combine the above two sections to create a transparent background button.

How do I make Bootstrap button smaller?

Use the . btn-sm class in Bootstrap to create a small button.

How do I make a transparent container in CSS?

First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border - the div is transparent.


2 Answers

make css to .btn-primary-outline

example like this : https://jsfiddle.net/472cxwg9/

like image 155
saiful Avatar answered Sep 28 '22 06:09

saiful


Use

class="btn" and style="background-color:transparent" 
instead of
 class="btn btn-primary-outline"

result

enter image description here

like image 40
Abdelwahid Oubaalla Avatar answered Sep 28 '22 04:09

Abdelwahid Oubaalla