Joey Zeolance Knight Joey Zeolance Knight - 6 months ago 23
CSS Question

CSS only, is it possible to change each letter in a button to a different color at the same time on hover?

I should start by saying that I am still learning CSS. I don't know all that much about it, yet.

Currently this is what I have for the button:



button {
border: none;
right: 0;
position: fixed;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
width: 100px;
padding: 10px;
margin: 5px;
text-align: center;
background-color: black;
color: white;
word-wrap: break-word;
transition: all ease 1s;
}
button:hover {
background-color: white;
}

<a href="http://www.google.com">
<button>Google</button>
</a>





As you can see, the button is in a fixed position inside of an a tag so I can click on the entire box rather than just the text. I included the transition so the background would fade to white, but I removed the text color because I wanted to add specific colors to each letter rather than them all changing to the same color. For example, if I were to hover over the button, I want all of the colors to change to specific colors at the same time (it will be the Google colors).

The only way I know to change each individual color is to add a span tag to each of them with a different color and then add :hover, but then only that letter changes when I hover over it.

Is it possible to accomplish this with only CSS?

edit: if there is anything wrong with my code that is unnecessary please let me know. As I said, still learning.

Answer

Semantically there is no reason to put a button inside a but you can use the hover of the to control elements inside it, like so:

HTML

<a href="http://www.google.com">
    <div>
      <span>G</span>
      <span>o</span>
      <span>o</span>
      <span>g</span>
      <span>l</span>
      <span>e</span>
  </div>
</a>

CSS

div {
    border: none;
    right: 0;
    position: fixed;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    width: 100px;
    padding: 10px;
    margin: 5px;
    text-align: center;
    background-color: black;
    color: white;
    word-wrap: break-word;
    transition: all ease 1s;
}
div:hover {
    background-color: white;
    span {
        transition: all ease 1s;
        &:first-child {
            color: #4285f4;
        }
        &:nth-child(2) {
            color: #ea4335;
        }
        &:nth-child(3) {
            color: #fbbc05;
        }
        &:nth-child(4) {
            color: #4285f4;
        }
        &:nth-child(5) {
            color: #34a853;
        }
        &:nth-child(6) {
            color: #ea4335;
        }
    }
}

Demo https://jsfiddle.net/yy0dyzdb/