make a CSS HTML button

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

Hugo Migneron · Accepted Answer · 2010-11-09 15:59:36Z

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.

edited Nov 9, 2010 at 15:59

answered Nov 9, 2010 at 15:52

Hugo Migneron

4,9171 gold badge35 silver badges52 bronze badges

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

7 Comments

user175084 Over a year ago

hi this was very helpful... i have a question on how will the first CSS code you wrote be applied to all buttons?? there is no mention of Button anywhere in that... thanks

user175084 Over a year ago

i have a style.css stylesheet where all the styles are put. just wanted to let you know..

Hugo Migneron Over a year ago

this is because the markup <asp:Button> translates to an <input type="submit"> element in HTML. This is what a "button" is (there are other representations that work in HTML, but the <input type="submit"> element is what ASP.NET generates.

Hugo Migneron Over a year ago

Do you just get a normal button or the button is not showing at all? Which solution did you go for, the first or second one? I recommend that instead of putting all your styles at once, you start with just one style in the CSS code and when that works add the rest. If you can't seem to figure it out, use a tool like firebug (in firefox) to help you out. getfirebug.com

Hugo Migneron Over a year ago

I would put a span around the code that you arleady have : <span class="mySpan"><asp:Button ..... /></span> and then in your css put span.mySpan{...} with the code that you found in that blog post and it should work.

|

albuvee · Accepted Answer · 2010-11-09 15:51:41Z

1

If the asp:Button is rendering as a HTML-input-element, use input#Search_Button instead of a.button everywhere in the css … and if asp:Button is rendering as a HTML-button-element, use button#Search_Button instead of a.button

… btw: if possible add a class to your asp:Button to use the css-declaration instead of the id

answered Nov 9, 2010 at 15:51

albuvee

2,7646 gold badges29 silver badges39 bronze badges

1 Comment

Hugo Migneron Over a year ago

ASP.NET does not garantee that the ID will stay the same so using input#Search_Button is a bad idea. He has to go with CssClass if he wants to style that button specifically.

Collectives™ on Stack Overflow

make a CSS HTML button

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related