Transition "Fill from left" into background

Question

I need to make a transition Fill from left in the background of a button. Something much like what you’re in http://h5bp.github.io/Effeckt.css/dist/#0 (search for the button "Fill from left").

I want that when I hover the mouse over it, it fills the background from left to right. My syntax is like this:

  .BT{
    font-size: 12px;
    height: 30px;
    left: 330px;
    line-height: 30px;
    top: 350px;
    width: 110px;
}

And the hover of that button, which is wrong, is like this:

.BT:hover{background-color:red;
transform:translate(-10%, 0px); 
transition:transform 500ms ease 0s;
}

What happens is he’s moving the button, wanted to do a test to move internally.

Answer 1

The code you placed is to move the button. If you want to move the background you can animate the position of it: (jsfiddle)

.btn {
  background: #fff linear-gradient(90deg, #8f2 50%, #59f 50%);
  background-position: 0% center;
  background-size: 200%;
}

.btn:hover {
  background-position: 100% center;
}

If you want to animate an element inside the button look at this example: jsfiddle.