Hello readers, Today in my blog I have tried to create a Google colored button.

Before creating this a question arises in my find is it really possible to change each letter in a button to a different color at the same time on hover.

For creating this within the button tag, I have taken span tag that contains a different class name related to each letter color.

Below is the HTML code for it :-

<button>

<span class="blue">G</span>

<span class="red">o</span>

<span class="yellow">o</span>

<span class="blue">g</span>

<span class="green">l</span>

<span class="red">e</span>

</button>

Now in the CSS at hover using the transition property the color of each letter gets changed.

Below is the CSS code :

/* for button */
button {

color: black;

}
/* blue */
button:hover .blue {

color: blue;

}
/* button span */
button span {

transition: all 0.5s ease;

}
/* red */
button:hover .red {

color: red;

}
/* yellow */
button:hover .yellow {

color: yellow;

}
/ * green */
button:hover .green {

color: green;

}

Conclusion :-

With the help of CSS3 transition property, it became possible to change the color of each letter in a button at the same time.