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

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

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

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