how to grey out a disabled button

Question

i have the following button:-

 <button type="submit" disabled style="
    position: absolute;
    height: 40px;
    border: none;
    color: #fff;
    background: #4d9b84 ;
    padding: 0 22px;
    cursor: pointer;
    border-radius: 30px;
    top: 5px;
    right: 5px;
    font-size: 13px;
    font-weight: 500;">
                            Get My Estimate
                        </button>

currently the button is disabled, but the button text is not grey out, as follow:-

so can anyone how i can grey out a disabled button?

Hav your tried using the `:disabled` css property with your 'grey out' styles. (https://www.w3schools.com/cssref/sel_disabled.asp) Cause it seems that you are overriding the inherit disabled state styles. — JGuarate, Jul 10 '20 at 19:52
@JGuarate why i am overriding the default? can you advice? i thought that setting a button as disabled will automatically grey it out.. — John John, Jul 10 '20 at 19:54
@YerrapotuManojKiran i set this inside my css but it did not have any effect — John John, Jul 10 '20 at 20:00
try this button:disabled { color: gray !important; }, as you have used inline styles, it got more priority thats y i have added !important flag, in real time projects mostly we dont use inline styles — Yerrapotu ManojKiran, Jul 10 '20 at 20:01
@testtest what he is trying to say is by default browser will apply styles to disabled element and u have overrided it with some inline styles, which is not necessary — Yerrapotu ManojKiran, Jul 10 '20 at 20:04

Martin · Accepted Answer · 2020-07-10T20:03:04.543

You should put your CSS styles into a stylesheet rather than directly onto the HTML . Once it's set as a CSS style rule you can then use the :disabled flag to set styles for when that attribute is true.

You can not use the :disabled flag on inline styles.

Inline styles (style='...')will overwrite almost every other CSS style but can only be applied to the element (in this case a <button>) at the instance the element is created. It is not "dynamic" or re-active to events that occur once the page is loaded.

Overall, inline styles are to be avoided!

button.standard {
   /* position: absolute;*/
    height: 40px;
    border: none;
    color: #fff;
    background: #4d9b84 ;
    padding: 0 22px;
    cursor: pointer;
    border-radius: 30px;
 /*   top: 5px;
    right: 5px;*/
    font-size: 13px;
    font-weight: 500;
}

button.standard:disabled {
    color: #666;
}

<button type="submit" disabled class="standard">Get My Disabled Estimate</button>
<BR><BR>
<button type="submit" class="standard">Get My Live Estimate</button>

how to grey out a disabled button

1 Answers1