Transition "Fill from left" in the background

Question

Transition "Fill from left" in the background

Navigation

#1 by (1 votes)

1

I need to make a fill from left transition in the background of a button. Something very similar as it is in link (look for the "fill from left" button).

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

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

And the Hover of this button, which is wrong, looks like this:

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

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

html css

asked by anonymous 26.02.2014 / 19:10

1 answer

Authentication error when integrating Facebook SDK 3.6 to Android Convert string to WE8MSWIN1252

score 1 · Accepted Answer

The code that you put in is to move the button. If you want to move the background you can animate its position: ( 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 .