CSS transition from on side on button

Question

I am working on a button which changes background color and color CSS properties on hover. Basic stuff.

<span>Contact me</span>

.contact-right span{
    background-color: #fff;
    color: #f87f73;
    padding: 0px 25px;
    border: 5px solid #f87f73;
}

.contact-right span:hover{
    background-color: #f87f73;
    color: #fff;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

Not this working fine and I see the transition effect smoothly and the background color and color change smoothly. But I wanted a particular thing by which the transition takes place from left to right of the button. I mean that the transition should not just act on the whole button at once, it should slide in from the left and change the background color and color of the text from the left to right.

How do I accomplish this? Can it be accomplished by CSS or I would have to use Jquery somehow?

Answer 1

I hope this is how u want it..

DEMO

.contact-right span{
    background-color: #fff;
    color: #f87f73;
    padding: 0px 25px;
    border: 5px solid #f87f73;
    display: block;
    background-image: linear-gradient(to left,
                                      transparent,
                                      transparent 50%,
                                      #00c6ff 50%,
                                      #00c6ff);
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;

}

.contact-right span:hover{
background-position: 0 0;
    background-color: #f87f73;
    color: #fff;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

Source

Answer 2

You should try to play on :before and :after pseudo-elements, like shown on this codrops article :

.contact-right {
    position: relative;
    background-color: #fff;
    color: #f87f73;
    padding: 5px 25px;
    border: 5px solid #f87f73;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
}

.contact-right:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #f87f73;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

.contact-right:hover {
    color: #fff;
}

.contact-right:hover:before {
    width: 100%;
    color: #fff;
}

JSFiddle