Twitter Bootstrap Question posted in

Twitter bootstrap – 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!

Tags:

4

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    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…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search