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
  • 272 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jch02140

Dani AI

Generated

Short answer: yes — you can get multi‑color button text on hover without images. Two clean, commonly used CSS-first approaches are (A) clip a gradient to the text so the button label shows a multi‑color fill, and (B) use SVG (or per‑letter spans) when you need absolute cross‑browser control. was right to point toward gradients; ’s span approach is a perfectly valid fallback for very old browsers or when each character must be a distinct color.

Example 1 — gradient clipped to text (pure CSS, animates on hover). This keeps the label selectable and simple to maintain:

<button class="btn"><span class="label">COLORFUL</span></button>

.btn { padding: .5rem 1rem; border-radius:6px; background:#f3f3f3; border:1px solid #ccc; }
.label {
  background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#06f,#f0f);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:background-position .4s ease;
}
.btn:hover .label { background-position:100% 0; }

This technique uses background-clip:text and -webkit-text-fill-color; it’s supported in modern browsers but not IE, so check compatibility when IE/old Edge support matters. (developer.mozilla.org)

Example 2 — SVG text with a gradient fill. Inline SVG lets you use <linearGradient> and apply it as the text fill; it’s robust for complex fills and works well in responsive UIs (remember to provide an accessible fallback or hidden text for screen readers). (developer.mozilla.org)

Fallbacks, tips and accessibility

  • Provide a solid-color fallback (or feature-detect with @supports) for browsers that don’t support text clipping.
  • If you need per-letter control like ’s demo, automate wrapping with a small JS helper or generate spans server-side to avoid brittle markup.
  • Ensure hover and focus states meet WCAG contrast and visible-focus requirements (buttons are UI components and need non-text contrast / good focus indicators). (developer.mozilla.org)

Choose the gradient/clip approach for simplicity and animation, SVG when you need exact rendering or advanced gradients, and per-letter spans when you need different colors per character.

Recommended Answers

All 9 Replies

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.