6-30-2010 10-42-02 AM

 I’m working on a couple of demo application in ASP.NET Web Forms and I noticed that, like in many themes I encounter, Button objects don’t match the theme and lack mouseover effects.

So here is how you make your ASP.NET Button control instances match other “clickable” objects in the default ASP.NET Web Site template (like the menu tab).

Open the Site.css file in the Styles folder of your solution and add the following 2 CSS classes.

Code Snippet
  1.  
  2. .button {   
  3.    color: White;   
  4.    background-color: #465C71;
  5.    border:1px solid;   
  6.    border-color: Gray;   
  7. }   
  8.  
  9. .buttonhover {   
  10.    color: White;   
  11.    background-color: #BFCBD6;
  12.    border:1px solid;   
  13.    border-color: Gray;   
  14. }

Now when you add an ASP.NET Button Control to your page, set the CssClass to button and add html onmouseover and onmouseout attributes as follows.

 

Code Snippet
  1.  
  2. <asp:Button ID="Button1" runat="server" Text="Button" CssClass="button"
  3.             onmouseover="this.className=’buttonhover’"
  4.                          onmouseout="this.className=’button’"  />
  5.  

 

By default your buttons still look like vanilla buttons but when you want, this method will make your buttons match your site’s theme.

 

Technorati Tags: ,,
Mega World News Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google Yahoo Buzz StumbleUpon Weekend Joy