.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Change image of button on hover and disabled using CSS

Posted By:shankey       Posted Date: April 21, 2011    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

Change image of button on hover and disabled using CSS
 

Step1: Define CSS for button

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

  Button1: Which will enable 3rd button

1.  CSS for button1 when it 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

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


 

Button2: Which will disable 3rd button

1.  CSS for button2 when it 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

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

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

1.  CSS for Enabled button3

  .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

  .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


Step2: Define HTML control using above defined CSS

In below image red box highlight the place where above defined css is used.

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



Step3: Check it's works

Normal view


Hover on Enable button


Click on Enable button


Hover on Disable button



Click on Disable button


 Subscribe to Articles

     

Further Readings:

Responses
Author: Srikanth         Company URL: http://www.dotnetspark.com
Posted Date: April 22, 2011

Nice Article !!!
Author: shankey         Company URL: http://www.dotnetspark.com
Posted Date: April 25, 2011

hi Srikanth,

Thanks for your appreciation. :)

Thanks,
Shankey

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend