Change Button Color (Mouseover)

[KevinMcC]

If I have two identical buttons but different colors how do I go abouts making it change colors when someone puts the mouse cursor over the button?

Is there code that goes in the css to do this?

Thanks!

[MPC]

Not done via CSS. Here's the code:

<a href="http://yoururl.com/"><img src="http://url to image #1" alt="" width="xxx" height="xx" onmouseover="this.src='http://url to image #2'" onmouseout="this.src='http://url to image #1'"/></a> 

Note that the "URL to image #1" goes two places.

[KevinMcC]

Thanks buddy will give that a shot!

[sirtiner]

It should be done with css not like that, and if you want it really good you have the two buttons in the same image so you dont get a delay.

Just search "css hover sprite" or something.

[MPC]

It should be done with css not like that, and if you want it really good you have the two buttons in the same image so you dont get a delay.

Just search "css hover sprite" or something.

Yes, that's the harder (but better) way to do it. This is what it does essentially: What appears to be two images is actually just one image that is partially exposed. So imagine you have a 200px by 100px rectangle image. The first half is white, the second half is black. The CSS code would basically say "show the first half by default and on mouse over, show the second half instead". The advantage to using this method is that there is only one image being loaded, so it's faster.

I actually attempted to build my entire template using a CSS sprite once. The idea is that only one big image would load, and then it gets cached. The site takes that single images and exposes portions of it where needed in the template. That would have a huge impact on load times. I wasn't able to get it working 100% cross browser so I gave up on it. But if you are interested to learn more, check out CSS Sprites: What They Are, Why They’re Cool, and How To Use Them | CSS-Tricks for an excellent read. Then once you understand the concept, try out SpriteMe. You'll have to go through the demo to better understand the functions.

[sirtiner]

Was that to me? I already know it ins and outs. But thx anyways.

About your cross browser problem, there should not be a problem unless you tried it like years ago. like you said, less http request the better, thats what makes a site fast.

[MPC]

Was that to me? I already know it ins and outs. But thx anyways.

Not it was to anyone who's interested! But now you've peaked my curiosity. I might bug you about this when I try again if that's OK with you

[sirtiner]

sure thing, just give me a pm

[CK]

Was that to me? I already know it ins and outs. But thx anyways.

And if you want someone who is kick ass at working with sprites I would higher sirtiner. Absolutely 100% awesome to work with

[Jibninjas]

Using CSS sprites is super simple with a hover over button. Just take your block that you want the button to be,

<div class="button"></div> 

Then put a background in it

.button {
  background: transparent url(where/your/button/is.png) 0px 0px;
  height: 100px;
  width: 100px;
} 

Now just change the background position when it is hovered over

.button:hover {
  background-position: -100px 0px;
} 

That's it.