Home > DeveloperSection > Forums > Change style of button during mouse hover event in asp.net
Sanjay Sharma
Sanjay Sharma

Total Post:45

Points:315
Posted on    December-05-2014 10:21 PM

 ASP.Net C# 
Ratings:


 2 Reply(s)
 867  View(s)
Rate this:

I want to change the shape/style of button during mouse hover in asp.net. Actually i want to make the button circular during mouse hover in asp.net.



Chintoo Semi

Total Post:135

Points:947
Posted on    December-06-2014 4:50 AM

Generally, you would do this with the CSS :hover pseudo-class:

 

a { /* define normal styles here */ }

 

a:hover { /* define hover styles here */ }

To achieve a circular button, you could use a graphic image. Assuming you had a transparent PNG called circle.png in your images directory, you could do something like this:

 

a:hover {

  background: url('images/circle.png') no-repeat;

}

You could also set the border radius of the button to be one-half of the button height and width (which should be the same):

 

a:hover {

  height: 50px;

  width: 50px;

  border-radius: 25px;

}


john rob

Total Post:108

Points:756
Posted on    December-06-2014 5:46 AM

Create two Images for button. Then implement this css.

 

.blueButton

{  

     background:url('../Images/btnBackground.png');         

     border:0;

}

.blueButton:hover

   background:url('../Images/btnBackground_circular.png');  

}

<input id="Button1" type="button" class="blueButton" value="button" />


Don't want to miss updates? Please click the below button!

Follow MindStick