In the example provided, setting the property color: inherit
on a button
element prevents a disabled button from appearing in a disabled state.
I initially expected that due to specificity rules, disabled buttons would still display as disabled. I am curious about how this particular styling overrides the default user-agent behavior and if there is a way to revert back to showing them as disabled. Simply manually assigning a color using button:disabled {color:GreyText}
did not yield the desired result.
You can view the demonstration here: https://jsfiddle.net/zzhLhkjx/
For comparison, take a look at this alternative example: https://jsfiddle.net/g46kg6ev/. Here, a disabled button with greyed out text is shown. The difference lies in simply specifying the color to be inherited, which changes the behavior.