on mouse enter slide from left to right background position with jQuery

Question

I have a button for which I want to slide his background from #000 to #ccc . My problem is how to do that slide transition of button background on hover or mouseenter. It is possible to do this with jQuery? Very important , I don' want to use background images so all suggestions about images ..skip pls.

This is an annoying fiddle created only with css but is working only from top to bottom and not from left to right how I need. http://jsfiddle.net/xu3ck/166/

<a href="#" class="btn two">Submit Form</a>

.btn {
    width: 180px;
    text-decoration: none;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    color: white;
    line-height: 40px;
    font-size: 20px;
    font-family: arial, sans-serif;
    margin: 20px;
    float: left;
    display: block;
     color: white;
    box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset;
}



.two {
    background: linear-gradient(#111, #eee);
    background-repeat: repeat;
    background-size: 100% 200%;
    transition: all .5s linear;
}

.two:hover, .two:focus, .two:active {
    background-position: 0 -200%;
}

ty.

Answer 1

What the example does is it creates a liniar background on the button which spans 200% of the buttons height. When your mouse goes over the button it moves the background 200% up.
What I changed, is I changed the gradient from "top to bottom" to "left to right". Set the width 200% instead of the height, and on the hover I set the background 200% to the right.

I fixed it in this JsFiddle

What I changed was the following:

background: linear-gradient(#111, #eee);
To
background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

background-size: 100% 200%;
To
background-size: 200% 100%;

And
background-position: 0 -200%;
To
background-position: -200% 0;

Answer 2

You can make it work with :before and :after pseudoelements, which are compatible with IE8. No need for jQuery. Just CSS.

See this demo here .