Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to create a Google coloured button?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 533
    Comment on it

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

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

    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.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: