0

Hi,

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,

6
Contributors
9
Replies
38
Views
4 Years
Discussion Span
Last Post by jch02140
1

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?

Votes + Comments
yes
2

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

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

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?

86082cf0c54dc513e01e0baa0e101c66

Edited by jch02140

1

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>
<html>
<head>

<style>
 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}
</style>

</head>
<body>

<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>
</button>

</body>
</html>

Here is a demo on jsFiddle.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.