Button color based on query value

[sacgtdev]

How to code the button color so that the button color based on certain conditional value?

eg. if query_value >0, then color = green, otherwise, red.

Button is currently generated using jquery.

[jsetzer]

Assuming you have created a button using jQuery and already set the Bootstrap classes btn btn-default (and perhaps btn-md | btn-lg), stored in variable YOURBUTTON:

Code: Select all

YOURBUTTON.removeClass('.btn-default').addClass('btn-success');

Or

Code: Select all

YOURBUTTON.removeClass('.btn-default').addClass('btn-danger');

Depending on the selected Bootstrap theme, *-success will give the theme-wide-defined color for success messages and *-danger for error messages. Using those Bootstrap theme defined, side-wide classes is recommended for best user-recognition.

---

If you want different colors (not recommended), instead of replacing btn-default class by btn-danger/btn-success use something like ...

Code: Select all

YOURBUTTON.css('background-color', 'green !important');

---

Tip
Always remember that 8% of male users are color blind (and only very few females), most of them red-green. Those guys will barely see differences between red and green buttons, but just gray or gray. I recommend putting a different icon and caption, additionally, for best possible user guidance.