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

Up Next
    Ebook Download
    View all
    Learn
    View all