Member Avatar for jch02140

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
  • 260 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jch02140
Member Avatar for JorgeM

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
Member Avatar for Yosefb

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

commented: great... you used my exact solution lol, or i used yours :) +7
commented: yes +0
Member Avatar for <M/>

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

commented: correct +0
Member Avatar for joejoeBOB

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

commented: right +0
Member Avatar for <M/>

why not google the solutions?

Yes, why not?

Member Avatar for jch02140

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
Member Avatar for JorgeM

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.

Member Avatar for jch02140

Thanks for the code and help, JorgeM. :D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.