Fill background color left to right CSS

Question

Having a play around with some css3 today  transitions mainly   What i would like to achieve is that upon hover of an li element the background will fill from left to right with a different colour  ideally i would like to be able to fill half way or all the way   I have started a jsfiddle  Do i need to use the property  -vendor-prefix transition    Could anyone give me some pointers on achieving this please   Thanks

User · Answer

A single css code on hover can do the trick  box-shadow  inset 100px 0 0 0  e0e0e0   A complete demo can be found in my fiddle   https   jsfiddle net shuvamallick 3o0h5oka

User · Answer

The thing you will need to do here is use a linear gradient as background and animate the background position  In code  Use a linear gradient  50  red  50  blue  and tell the browser that background is 2 times larger than the element s width  width 200   height 100    then tell it to position the background left  background  linear-gradient to right  red 50   blue 50    background-size  200  100   background-position left bottom   On hover  change the background position to right bottom and with transition all 2s ease   the position will change gradually  it s nicer with linear tough  background-position right bottom  http   jsfiddle net 75Umu 3  As for the -vendor-prefix es  see the comments to your question extra If you wish to have a  quot transition quot  in the colour  you can make it 300  width and make the transition start at 34   a bit more than 1 3  and end at 65   a bit less than 2 3   background  linear-gradient to right  red 34   blue 65    background-size  300  100    Demo   x000D   x000D  div       font  22px Arial      display  inline-block      padding  1em 2em      text-align  center      color  white      background  red     default color             to left     to right  - affects initial color        background  linear-gradient to left  salmon 50   lightblue 50   right      background-size  200       transition   5s ease-out    div hover       background-position  left    x000D   lt div gt Hover me lt  div gt  x000D   x000D   x000D

User · Answer

If you are like me and need to change color of text itself also while in the same time filling the background color check my solution   Steps to create    Have two text  one is static colored in color on hover  and the other one in default state color which you will be moving on hover On hover move wrapper of the not static one text while in the same time move inner text of that wrapper to the opposite direction   Make sure to add overflow hidden where needed   Good thing about this solution    Support IE9  uses only transform Button  or element you are applying animation  is fluid in width  so no fixed values are being used here   Not so good thing about this solution    A really messy markup  could be solved by using pseudo elements and att data   There is some small glitch in animation when having more then one button next to each other  maybe it could be easily solved but I didn t take much time to investigate yet    Check the pen ---  https   codepen io nikolamitic pen vpNoNq   lt button class  btn btn--animation-from-right  gt     lt span class  btn  text-static  gt Cover left lt  span gt     lt div class  btn  text-dynamic  gt       lt span class  btn  text-dynamic-inner  gt Cover left lt  span gt     lt  div gt   lt  button gt    btn     padding  10px 20px    position  relative     border  2px solid  222    color   fff    background-color   222    position  relative     overflow  hidden    cursor  pointer     text-transform  uppercase    font-family  monospace    letter-spacing  -1px      class   btn  text         font-size  24px          btn  text-dynamic     btn  text-dynamic-inner           display  flex      justify-content  center      align-items  center       position  absolute      top 0      left 0      right 0      bottom 0      z-index  2       transition  all ease 0 5s          btn  text-dynamic       background-color   fff      color   222       overflow  hidden          amp  hover        btn  text-dynamic         transform  translateX -100               btn  text-dynamic-inner         transform  translateX 100                  btn--animation-from-right        amp  hover        btn  text-dynamic         transform  translateX 100               btn  text-dynamic-inner         transform  translateX -100                  You can remove  btn--animation-from-right modifier if you want to animate to the left

[css] Fill background color left to right CSS

Examples related to css