CHANGE STYLE OF BUTTON DURING MOUSE HOVER EVENT IN ASP.NET

Sanjay Sharma

Total Post:45

Points:315
Posted by  Sanjay Sharma
C# 
 1171  View(s)
Ratings:
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.

  1. Chintoo Semi

    Post:135

    Points:947
    Re: Change style of button during mouse hover event in asp.net

    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;

    }

  1. john rob

    Post:108

    Points:756
    Re: Change style of button during mouse hover event in asp.net

    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" />

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!