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



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.



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



Step 4: Check it's works

Normal view


Hover on Enable button


Click on Enable button


Hover on Disable button


Click on Disable button