the :disabled attribute on my button does not seem to work

Question

I'm having trouble with the style for a disabled button.
The enabled button works, the hover works but the disabled button reverts to the default? style:

CSS:

.smlbutton:enabled{
    color: #fff;
    background-color: #1d60ff;
    height: 20px;
    width: 18px;
    padding: 0px;
    border: none 0px transparent;
    font-size: 7px;
    font-weight: lighter;
    webkit-border-radius: 20px 10px 10px 10px;
    -moz-border-radius: 9px 10px 10px 10px;
    border-radius: 5px 20px 20px 20px;
}

.smlbutton:hover{
    color: #fff;
    background-color: #1d60ff;
    height: 22px;
    width: 18px;
    padding: 0px;
    border: none 0px transparent;
    font-size: 7px;
    font-weight: lighter;
    webkit-border-radius: 20px 10px 10px 10px;
    -moz-border-radius: 9px 10px 10px 10px;
    border-radius: 5px 20px 20px 20px;
}
 .smlbutton:disabled,.smlbutton.disabled{
    color: #fff;
    background-color: #1d60ff;
    height: 200px;
    width: 18px;
    padding: 0px;
    border: none 0px transparent;
    font-size: 7px;
    font-weight: lighter;
    webkit-border-radius: 20px 10px 10px 10px;
    -moz-border-radius: 9px 10px 10px 10px;
    border-radius: 5px 20px 20px 20px;

The ASPX:

<asp:TemplateField HeaderText="Approval Drawings Approved" Visible="true">
                                <ItemTemplate>
                                    <asp:TextBox ID="tbApprovals" runat="server" Text='<%# Bind("Approvals", "{0:MM/dd/yy}") %>' AutoPostBack="true" Enabled="true" OnTextChanged="tbDate_OnTextChangeApprovals" Width="100px"></asp:TextBox>
                                    <ajaxToolkit:CalendarExtender ID="tbApprovals_CalendarExtender" runat="server" TargetControlID="tbApprovals" />
                                    <asp:Button ID="btnApprovalsConvertToBaseline" class="smlbutton" runat="server" Text="B." OnClick="btnApprovalsConvertToBaseline_Click" Enabled="FALSE" />
                                    <asp:Button ID="btnApprovalsCompleteTask" class="smlbutton" runat="server" Text="D." OnClick="btnApprovalsCompleteTask_Click" Enabled="FALSE" />
                                    <asp:Button ID="btnApprovalsCompleteTaskOnTime" class="smlbutton" runat="server" Text="DOT" OnClick="btnApprovalsCompleteTaskOnTime_Click" Enabled="FALSE" />
                                </ItemTemplate>
                            </asp:TemplateField>

I enable the button using this c#

   try
    {
        TextBox tempApprovals = (TextBox)e.Row.Cells[9].FindControl("tbApprovals");
        DateTime myDateApprovals = DateTime.ParseExact(tempApprovals.Text.ToString(), "yyyy-MM-dd",
                                   System.Globalization.CultureInfo.InvariantCulture);

        if (myDateApprovals <= DateTime.Now.Date && e.Row.Cells[10].Text != "Actual")
        {
            tempApprovals.ForeColor = System.Drawing.Color.Red;
            tempApprovals.Font.Bold = true;
        }
        Button btnApprovals = (Button)e.Row.Cells[9].FindControl("btnApprovalsConvertToBaseline");
        Button btnApprovals2 = (Button)e.Row.Cells[9].FindControl("btnApprovalsCompleteTask");
        Button btnApprovals3 = (Button)e.Row.Cells[9].FindControl("btnApprovalsCompleteTaskOnTime");

        if (e.Row.Cells[10].Text.ToString() == "Forecast")
        {
            btnApprovals.Enabled = true;
        }

        if (e.Row.Cells[10].Text.ToString() == "Baseline")
        {
            btnApprovals.Enabled = false;
            btnApprovals2.Enabled = true;
            btnApprovals3.Enabled = true;
        }

        if (e.Row.Cells[10].Text.ToString() == "Adjusted")
        {
            btnApprovals.Enabled = false;
            btnApprovals2.Enabled = true;
            btnApprovals3.Enabled = true;
        }

        if (e.Row.Cells[10].Text.ToString() == "Actual")
        {
            btnApprovals2.Enabled = false;
            btnApprovals3.Enabled = false;
        }
    }
    catch { }

}

Answer 1

You do not need to style each pseudo-class. Instead, let inherit from parent.

.smlbutton {
    color: #fff;
    background-color: #1d60ff;
    height: 22px;
    width: 18px;
    padding: 0px;
    border: none 0px transparent;
    font-size: 7px;
    font-weight: lighter;
    webkit-border-radius: 20px 10px 10px 10px;
    -moz-border-radius: 9px 10px 10px 10px;
    border-radius: 5px 20px 20px 20px;
}

    .smlbutton:disabled,
    .smlbutton[disabled] {
        background-color: #0f0;
    }

    .smlbutton:hover {
        background-color: #f00;
    }