CSS: Change Image of Button On Hover and Disabled



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

  1. 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;
            }
     
  2. 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
  1. 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;
            }

     
  2. 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.
  1. 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;
            }

     

  2. 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;
            }


All buttons in Normal/Enabled state

CSS1.gif

Step 2: Define HTML control using above defined CSS

In the following image, a Red box highlights the place where the CSS defined above is used.

CSS2.gif

Step 3: Write code in .CS file to enable and disable button control

CSS3.gif

Step 4: Check it's works

Normal view

CSS4.gif

Hover on Enable button

CSS5.gif

Click on Enable button

CSS6.gif

Hover on Disable button

CSS7.gif

Click on Disable button

CSS8.gif