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

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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

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