Fill element from center on hover

Question

How can I create a button so that on hover the background colour fills the element from center to left and right of the element.

Example :

Answer 1

you can do a button with this structure

 






on.hover -> button > image
transform-origin: center
insert desired effect here

*edit -- seems like you want the text the have color changes while transition is happening..

you can do a 2 image button inside a div on hover hide the whtie background image and display the div that contains the brown image

Set the width of container to 0 pix and fix it to the center and then animate just the width will give you the desired results.