[Solved] How to gray out a k-button 30% more

[robert]

Hello for some users they're have a difficult time telling that the k-button is grayed out or disabled, so want to see if there's a way to gray out this button about 30% more when the "isNewBipEnabled" field is equal to "false" and i've attached a word document with snap shots for reference, thanks for any pointers!

 

                <td width="10%">
                    <button class="bip-btn" data-bind="enabled: isNewBipEnabled, click: onNewBip">
<img data-bind="attr: {src: newImgUrl}" style="vertical-align:middle;" />
                        <span style="font-weight:bold;margin-top:2px;">New BIP</span>
                    </button>
                </td>

/* <== special effiect when switching between views */
.bip-btn:hover {
    background-color: cadetblue;
}

[Ivan Danchev]

Hello Robert,

I am not sure the button from the posted code snippet is a Kendo UI button, since it is missing the data-role="button" attribute. In case it is a Kendo UI button (therefore styled by Kendo UI and has the respective Kendo UI classes), then you can set a lighter gray color to the span's text with CSS:

button.k-state-disabled>span {
  color: #D5D5D5;
}

Here's a dojo example. I would not say that it is 30% more grayed out since there is no way to measure this, but #D5D5D5 is just a lighter gray than the default #A1A1A1 color (applied to the disabled button state by the Bootstrap Kendo UI theme used in the example).

Regards,
Ivan Danchev
Progress Telerik

[robert]

Ok very interesting approach, will give this a try, thanks Ivan!