Asp Button hover and CSS

Question

I have an asp button control on which i have applied some style. I want that on hover of this button, the colour of the button should change or something of that sort. But I fail to understand why in CSS the button hover function is not working!! PLease help. Also please let me know what are the best effects we can have for a button hover.

    <asp:Button ID="btnSearch" runat="server" CssClass="button"  OnClick="btnSearch_Click"     Style="width: 480px;" Text="Search" />

.button
{
    background: white;
    border: solid 1px grey;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #001563;    
    height: 25px;  

}

.button:hover
{
    background: white;
    border: solid 1px grey;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: Red;   
    height: 25px;

}

you see this in every browser or just IE?

annakata
– annakata

2009-10-01 06:04:17 +00:00
Commented Oct 1, 2009 at 6:04 — annakata
– annakata, Commented Oct 1, 2009 at 6:04

Himadri · Accepted Answer · 2009-10-01 06:31:26Z

7

Please check the following code:

 <asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click"  Style="width: 480px;" CssClass="button" Text="Search" />
      <style type="text/css">
.button
{
    background: white;
    border: solid 1px grey;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #001563;    
    height: 25px;  

}

.button:hover
{
    background: white;
    border: solid 1px grey;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: Red;   
    height: 25px;

}</style>

answered Oct 1, 2009 at 6:31

Himadri

8,89616 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Himadri Over a year ago

I have checked the above code putting the css in aspx page and it is working fine. Have you put the .button css class in your css file or in the page? If you r using css file then please make sure Your page is accessing the css file.

Vijay Kumbhoje Over a year ago

Remember don't do any styling for control through properties, just apply css class.

Jim W · Accepted Answer · 2009-10-01 06:08:12Z

1

asp:buttons render as HTML input (submit button) tags, so you can't use the same CSS syntax as a hyperlink.

This should work in browsers (except MSIE):

(note: "button" is your class name)

input.button:hover{
   color: Green;
}

or to change all submit buttons:

input[type="submit"]:hover{
   color: Green;
}

If you Google for CSS techniques of doing hover on buttons (input buttons), then you'll find some better CSS and JavaScript techniques.

answered Oct 1, 2009 at 6:08

Jim W

4,9702 gold badges22 silver badges26 bronze badges

Comments

rahul · Accepted Answer · 2009-10-01 06:06:41Z

0

Let the style of the button be decided by the operating system. It would be bette not to try modifying this behavior. Most of the times you won't be successful.

The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).

See Selectors

If you want to apply hover effect to a button then better use an anchor tag and use an image inside that.

a:hover { }

answered Oct 1, 2009 at 6:06

rahul

188k50 gold badges239 silver badges266 bronze badges

3 Comments

archana roy Over a year ago

Thanks Phoenix. Can you explain by giving an example?

rahul Over a year ago

If you need to style like that of a button then make an image that looks like a button and in the :hover pseudo class change the style using a:hover.

archana roy Over a year ago

That is the last option. But dont we have another way if we dont want to design an image? Cant we change the button color through hover property of CSS?

Collectives™ on Stack Overflow

Asp Button hover and CSS

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related