CODEWITHSUNDEEP
htmlcss
John John
John John

Reputation: 1

how to grey out a disabled button

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:-

enter image description here

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

Upvotes: 2

Views: 15572

Answers (1)

Martin
Martin

Reputation: 22760

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>

Upvotes: 7

Related Questions