8 Comments to “CSS rollover buttons in ASP.net”

1. 

   KNT Network Services 28 August 2008 at 18:08 #

   Thanks for this Chris. I was trying to get a swap image on mouseover without javascript and came up with this modification:
   For the HTML:

   Then in my CSS:

   .button
   {
   position: relative;
   background-repeat: no-repeat;
   white-space: nowrap;
   display: block;
   width: 76px;
   height: 31px;
   margin: 0px;
   padding: 0px;
   }

   .button a
   {
   display: block;
   color: #666;
   font-weight: bold;
   width: 76px;
   height: 31px;
   display: block;
   float: left;
   text-decoration: none;
   }

   .button img
   {
   width: 76px;
   height: 31px;
   border: 0;
   }

   .button img {width: 76px; height: 31px; border: 0; }
   * html a:hover {visibility:visible}

   .button a:hover img{visibility:hidden}

   .button a:hover span{visibility:visible}

   .button span
   {
   visibility:hidden;
   padding-right: 0px;
   padding-left: 0px;
   left: 0px;
   padding-bottom: 0px;
   margin: 0px;
   cursor: pointer;
   padding-top: 0px;
   position: absolute;
   width: 76px;
   height: 31px;
   text-align: center;
   background-image: url(‘images/login-noshadow-ovr.gif’);
   background-repeat: no-repeat;
   }

   This gives a nice simple CSS no javascript rollover for an asp:button.

   Thanks!
2. 

   Harini 1 April 2009 at 14:49 #

   Very good article,But beginner no way to understand that,so please explain some important thing.For example
   Well know CSS writer can understand,But beginner have doubt in how to use same class name(button) repeatedly,then it will be used in ASP.NET designing page.

   But Really i said u done great work
   Thanks you and keep continue
3. 

   albert 1 April 2009 at 14:52 #

   Hi Christer V. Aas

   Nice and good example for beginner

   But explain me also how to apply this in Asp.Net side

   Thank You Christer V. Aas
4. 

   Jon 11 July 2009 at 06:35 #

   This is way cool, but I am struggling with how to get a 3rd color. When it has been clicked, I would like to have it change colors, now to a 3rd color.

   I have made an image that is the desired 3rd color, but I cannot not figure out how to address the image src in the code behind. In the btn_next_click event I tried setting the background color of the btn_next but that changed the color when I hovered over it. I finally figured out why. (a little slow)

   But, how do I change the image displayed. I presume I need to do it in the same click event, but i cannot figure out how to address the image and set a new value for the src. It doesn’t like btn_next.img.src = “image/button_thirdColor”. It says it does not contain a definition for src.

   Any help would be greatly appreciated.

   Thanks
   Jon
5. 

   Jon 11 July 2009 at 07:30 #

   Sorry to bug you. I figured it out on my own. It sseems that the img and span lines show up in the text property for the LinkButton. So, if in the click event (in the code behind) you set the linkbutton text property to the string that includes the name of the image with the 3rd color. Like this

   btn_Event.Text = ” Events”;

   Obviously, i have changed the ids, and the text to dispaly, but you get the idea. BTW, you have to be careful with the quotes. If you do not have the little sequence – + “‘” + – like i have, it thinks it is a line of code and wants a couple of ; . You have to concatenate this correctly. (I was asked how to do this in VB once back in 95 on a job interview at Microsoft. He gave me the book, and brought up the help screen then said he would be back in 15 or 20 minutes. I told him to wait while i wrote it on the board. He said most people could not concatenate the string properly and offered me the job!)

   i want to figure out how to do this without images, just by setting backgroudn colors. That way i do not an image for each button in it’s ‘depressed” / “selected” state.

   Good luck – let me know if you have a better way.

   Jon
6. 

   Jon 11 July 2009 at 07:36 #

   Oh, that is bad, this wiki stripped out most of the line, it thought they were html tags. I can’t paste in here how the line looks, with the strange formatting. I am replaceing the left and right brackets (for this example.
   Replace $ with LT & % with GT

   btn_Event.Text = “$img src=” + “‘” + “image/button_deactive.GIF” + “‘” + ” /% $span%Events$/span%”;

   Perhaps the wiki will let this through now.

   Jon

   Jon
7. 

   Jon 14 July 2009 at 06:33 #

   I have 8 buttons side by side in a row across the page. each button has a different 3rd color (as discussed above) for when it is depressed. To make this clear
   1 – when not hover or selected – light blue
   2 – when hover but not selected – dark blue
   3 – when selected – unige 3rd color – even if you hover over it, it must be this 3rd color which each button has a unique one.

   I did not want to have 8 different images, one for the depresse state of each button. I wanted to just change the backgrounds.

   So, i created a transparent image and put that in as the src for each button. I also added image backgroudn color to the style like so
   .button img
   {
   width: 108px;
   height: 40px;
   border: 0;
   background-color: #48A6FE;

   }

   Now, with the clear image file, in the code behind using the click event for each button, I was able to set the background of the image to the appropriate 3rd color when clicked, and set the background of that button to the same 3rd color at the same time. At this time, i also reset all the other buttons to their ‘normal’ colors, light blue and dark blue as listed above.

   Also, i wanted to change the color of the text when hovered, so i added a style

   .button a:hover span
   {
   color: White;

   }

   Hope this helps someone!

   Jon
8. 

   adam 2 September 2009 at 09:00 #

   css in asp.net?

Leave a Reply