Question

I have a standard button in my default.aspx page.

<asp:Button ID="Search_Button" runat="server" Text="Search" 
                      onclick="Search_Button_Click" />

and like this i have many buttons in my project. what i wish to do is make the button look fancy and i know it can be done in the CSS file, but i dont know how to do it.

i have this CSS code but it is in the anchor and i cant figure out how to implement that class with my asp:Button class.

a.button {
/* Sliding right image */
background: transparent url('button_right.png') no-repeat scroll top right; 
display: block;
 float: left;
     height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
 margin-right: 6px;
 padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
 /* FONT PROPERTIES */
 text-decoration: none;
    color: #000000;
 font-family: Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
   }
  a.button span {
  /* Background left image */ 
   background: transparent url('button_left.png') no-repeat; 
   display: block;
   line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
    padding: 7px 0 5px 18px;
   } 
    a.button:hover span{
    text-decoration:underline;
         }

any help will be appreciated. thanks

Answer 1

The CSS that you posted will apply to anchor elements.
Buttons in ASP.NET are not anchors, they are input elements.

There are a few things you can do to get your styles on buttons.

The simplest would be to change the CSS that you posted. Instead of applying it to <a> elements, apply it to <input type="submit"> instead. Do it this way :

input[type="submit"] 
{
    /* Sliding right image */
    background: transparent url('button_right.png') no-repeat scroll top right; 
    display: block;
    float: left;
    height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
    margin-right: 6px;
    padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
 }
 input[type="submit"]:hover
 {
    text-decoration:underline;
 }

This will apply the style to all buttons that are affected by your css. Note that you also have a style for a.button span which I’m not quite sure what you’re trying to do with. If you give more details on what you are trying to style we will be able to help you. I removed it here for now.

If you want to go with something more specific — style that button only for example, you could do it as well. To do that, you would add a CSS class in your ASP markup that specifies the CSS class that you want to use :

<asp:Button ID="Search_Button" runat="server" Text="Search" 
                      onclick="Search_Button_Click" CssClass="my-button" />

Then, in your CSS, you would change the rule I posted above. Instead of input[type="submit"] you would go with :

input[type="submit"].my-button
{
    //...
}

Always try to go with rules as general as possible in your CSS. If all the buttons in your site will look like this one, then go with the first option, your CSS will be simpler that way.