CODEWITHSUNDEEP
csstwitter-bootstrap
zbads
zbads

Reputation: 135

Twitter-Bootstrap button color on-loading state

I'm currently working on a web project and I changed the Bootstrap's primary button color to orange. Now almost all button states work fine: active state, hover state, etc - except the loading state.

Once it enters the loading state, it returns to its default color which is blue.

I was searching on how to do it but seems I can't seem to find it. Can anyone help me out with this or if this question already exists, please redirect me to it. Preferably, I'd like to do it without javascript. Thanks!

Upvotes: 1

Views: 1518

Answers (4)

mtszkw
mtszkw

Reputation: 2783

This one rather can't be done without using JavaScript.

First way, if you aren't afraid of JS: jsfiddle

HTML:

<button type="button" id="btn1" data-loading-text="Hm.." class="btn btn-primary">
  Loading state
</button>

CSS:

.btn-primary,
.btn-primary:hover,
.btn-primary:active {
    border: none;
    margin: 5px;
    background-color: #b2d025; /* here */
}

JS:

$("#btn1").click(function() {
    var $btn = $(this);
    $btn.button('loading');

    $(this).css('background-color','#b2d025'); /* and here */

    setTimeout(function () {
        $btn.button('reset');
    }, 1000);
});

Second way (less js, more css, using !important): jsfiddle

Upvotes: 3

Amit singh
Amit singh

Reputation: 2036

If you don't want to use javascript than you can try this..

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus:hover {
    border: none;
    background-color: #b2d025;    
}

Hope this helps...

Upvotes: 0

Tarun Gupta
Tarun Gupta

Reputation: 1669

Did you try using bootstrap's customize I think they have an option for changing the color of primary button. Look for btn-primary-color

Upvotes: 0

Abdulla Nilam
Abdulla Nilam

Reputation: 38584

You can use Inline CSS

<button type="button" id="btn1" data-loading-text="Hm.." class="btn btn-primary" style="background-color:red">
  Loading state
</button>

Note : This will gives your answer but hover and active effects will not work

Upvotes: 1

Related Questions