JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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}