CODEWITHSUNDEEP
javascriptjquerycss
Canvas
Canvas

Reputation: 5897

CSS3 change button background colour left to right

I'm just having a little fun with CSS3 transitions and was thinking how would I animation a button to be filled in with a different colour when you hover over? So for example

We have a button which is white, when someone hovers over the button the button will fill up with blue from the left side to the right side, and when they stop hovering over the button the button will fill up in white from the right side to the left side, does anyone have any ideas on how this is done? The only website I can see a clear is the Pokémon website.

Upvotes: 1

Views: 2973

Answers (1)

Canvas
Canvas

Reputation: 5897

This is all the css you need to achieve the simple effect

.wrapper .navigation button
{
    width: 150;
    height: 85;
    background: linear-gradient(red 50%, blue 50%);
    transition: background 1s ease-out;
    background-size:1px 170px; 
}

.wrapper .navigation button:hover
{
    background-position:0px 85px; 
}

Upvotes: 2

Related Questions