CSS: Change Image of Button On Hover and Disabled

Shankey
May 06, 2011

67.6k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

This article helps to understand how CSS is changed automatically when a button is disabled from the server side. Further, how to define CSS when a user hovers over an element.

Step 1: Define CSS for button

Define two css (i.e. one for hover and another normal) for each button.

Button1: Which will enable 3rd button

CSS for button1 when it is hovered by the user. Here CButtonMakeEnable:hover
does it all; :hover defines what css is applied when an element is hovered.

.CButtonMakeEnable:hover
        {
            background: url("Images/buttonMakeEnableHover.png");
            background-repeat: no-repeat;
            background-position: top right;
            background-color: transparent;
            cursor: pointer;
            border: 0px;
            height: 48px;
            width: 48px;
        }
CSS for button1 when it is not hovered by the user. Here the css is defined for normal behavior.

        .CButtonMakeEnable
        {
            background: url("Images/buttonMakeEnableNormal.png");
            background-repeat: no-repeat;
            background-position: top right;
            background-color: transparent;
            cursor: pointer;
            border: 0px;
            height: 48px;
            width: 48px;
            outline-width: 0px;
        }

Button 2: Which will disable 3rd button

CSS for button2 when it is hovered by user. Here .CButtonMakeDisable:hover does it all; :hover defines what css is applied when an element is hovered.

.CButtonMakeDisable:hover
        {
            background: url("Images/buttonMakeDisableHover.png");
            background-repeat: no-repeat;
            background-position: top right;
            background-color: transparent;
            cursor: pointer;
            border: solid 0px #ff0000;
            height: 48px;
            width: 48px;
        }
CSS for button2 when it is not hovered by the user. Here the css is defined for the normal behavior.

        .CButtonMakeDisable
        {
            background: url("Images/buttonMakeDisableNormal.png");
            background-repeat: no-repeat;
            background-position: top right;
            background-color: transparent;
            cursor: pointer;
          border: solid 0px #ff0000;
            height: 48px;
            width: 48px;
            outline-width: 0px;
        }

Button 3: Which will be enabled and disable by 1st and 2nd button.

CSS for Enabled button3. This is defined for the normal behavior when the button is enabled.

        .CButton
        {
            background-image: url("Images/bulbEnable.png");
            background-repeat: no-repeat;
            background-position: top right;
            background-color: transparent;
            cursor: pointer;
            border: solid 0px #ff0000;
            height: 48px;
            width: 48px;
             outline-width: 0px;
        }
CSS for disabled button3, when the button is disabled. Here .CButton[disabled] does it all; this ccs is automatically applied when the element is disabled.

        .CButton[disabled]
        {
            background: url("Images/bulbDisable.png");
            background-repeat: no-repeat;
            background-position: top right;
            background-color: transparent;
            cursor: pointer;
            border: solid 0px #ff0000;
            height: 48px;
            width: 48px;
        }