I am wondering is it possible to create a regular CSS button that have different colors display on the text when hover without using any images?

Best Regards,

You can create CSS gradients.

commented: yes +0

I think you'll have trouble using the gradient approach accross modern browsers...

Can you clarify what you mean by different colors? You want the text to have multiple colors, you mean like a spectrum of colors, or do you want each letter to have its own color?

commented: yes +0

yes it is possible. I am not sure if you want to use an image or use css to make the buttons.

commented: yes +0
commented: great... you used my exact solution lol, or i used yours :) +7

it is possible to do it if you use css or just use images.

commented: correct +0

I agree with all the solutions above, why not google the solutions?

commented: right +0

why not google the solutions?

Yes, why not?

I tried to google before but none seems to be specifically what I wanted...
I have attached an image sample here. Is it possible to create such buttons and in its hover state in pure CSS?


This is the only thing I can come up with regard to what you are requesing...I dont beleive this will work on IE6 because of the pseudo class 'hover' and its compatibility with other elements other than anchors. An IE6 fix would require some JavaScript code to add a class.

<!DOCTYPE html>

 button {background-color:#f3f3f3;border-radius:5px;border:1px solid #ababab;}
 span {margin:-1px;}
 button:hover span.color1 {color:red}
 button:hover span.color2 {color:yellow}
 button:hover span.color3 {color:green}
 button:hover span.color4 {color:blue}
 button:hover span.color5 {color:aqua}
 button:hover span.color6 {color:purple}
 button:hover span.color7 {color:fuchsia}
 button:hover span.color8 {color:maroon}


<button type="button">
<span class='color1'>C</span>
<span class='color2'>O</span>
<span class='color3'>L</span>
<span class='color4'>O</span>
<span class='color5'>R</span>
<span class='color6'>F</span>
<span class='color7'>U</span>
<span class='color8'>L</span>


Here is a demo on jsFiddle.

Thanks for the code and help, JorgeM. :D