how to grey out a disabled button - html

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?

Answer 1

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>