Fill li item on hover in CSS

Question

I am trying to animate an <li> so that on hover it appears that there is a fill effect going from left to right.

This is what I have so far.

ul {
 list-style-type: none;
}

.hoverTest {
 float: left;
 margin-right: 1px;
}

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to left, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position:left bottom;
    margin-left:10px;
    transition:all 0.5s ease;
}
.hoverTest li:hover {
    background-position:right bottom;
}
.hoverTest li a {
    color:white;
}

   <div class="hoverTest">
    <ul>
 <li><a href="#">Test Button</a></li>
    </ul>
 </div>

I have a number of issues with this. First of all the fill effect is coming from right to left whereas I would like the opposite. No matter what I have tried with changing the positions of the backgrounds I just cannot get this to work.

Secondly, I would like there to be a small strip of the fill colour displayed to begin with as in this example by Jay Holtslander : https://codepen.io/j_holtslander/full/XmpMEp/

Finally the code I have at the moment seems to be relatively clunky, it is taken from this answer in 2013 by beardhatcode. Is there a more modern, simpler way to implement this effect?

@T.J.Crowder Thanks for the advice, I was actually unaware that I could put a snippet in my question. Thanks to Suresh for doing this for me. Is there a guide somewhere on how to insert snippets of code? — CBreeze, Nov 07 '17 at 11:49
@CBreeze: Frankly, the help around this really needs to be a lot better, but getting SE to do *anything* around snippets is an exercise in extreme patience/frustration. — T.J. Crowder, Nov 07 '17 at 11:57
@CBreeze: I've tried to fix that lack of documentation: https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha — T.J. Crowder, Nov 07 '17 at 12:40

score 1 · Accepted Answer · answered Nov 07 '17 at 11:46

I changed the background-position around and made the red background a bit larger than the blue one, which seems to have the desired effect.

ul {
 list-style-type: none;
}

.hoverTest {
 float: left;
 margin-right: 1px;
}

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to right, red 52%, blue 48%);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 0.5s ease;
}
.hoverTest li:hover {
    background-position:left bottom;
}
.hoverTest li a {
    color:white;
}

 <div class="hoverTest">
  <ul>
   <li><a href="#">Test Button</a>
   </li>
  </ul>
 </div>

Take a look at the updated fiddle: https://jsfiddle.net/jdLysrn2/1/

I'm not sure why you have been downvoted but for now this seems exactly what I was asking for. — CBreeze, Nov 07 '17 at 11:54
People tend to downvote answers to get theirs up higher. Glad I could be of help. — Jesse, Nov 07 '17 at 12:29

score 1 · Answer 2 · answered Nov 07 '17 at 12:24

You can achieve this using box-shadow css property with inset value.

ul {
 list-style-type: none;
}

.hoverTest {
 float: left;
 margin-right: 1px;
}

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: blue;
    /* Old browsers */
    box-shadow: inset 5px 0px 0px red;
    transition: 1s ease;
}
.hoverTest li:hover {
    box-shadow: inset 140px 0px 0px red;
}
    
}
.hoverTest li:hover {
    background-position:right bottom;
}
.hoverTest li a {
    color:white;
}

 <div class="hoverTest">
  <ul>
   <li><a href="#">Test Button</a>
   </li>
  </ul>
 </div>

score 0 · Answer 3 · answered Nov 07 '17 at 11:47

0

try this , it will work :

.hoverTest li {
   background: linear-gradient(to left, blue 50%, red 50%);
   border-left:3px solid red;
}
.hoverTest li:hover {
    background-position:left;
}

answered Nov 07 '17 at 11:47

Rahele Dadmand

573
1
4
17

score 0 · Answer 4 · answered Nov 07 '17 at 11:55

ul {
    list-style-type: none;
}

.hoverTest {
    float: left;
    margin-right: 1px;
}

.hoverTest li {
    width: 100px;
    padding: 11px 16px;
    text-align: center;
    float: left;
    background: #ff3232;
    background: linear-gradient(to right, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position: right;
    margin-left: 10px;
    transition: all 0.5s ease;
}
.hoverTest li:hover {
    background-position: left;
}
.hoverTest li a {
    color:white;
}






<div class="hoverTest">
        <ul>
            <li><a href="#">Test Button</a>
            </li>
        </ul>
</div>

Ehsan · Answer 5 · 2017-11-07T13:12:15.513

Try This:

ul {
    list-style: none;
    padding: 0;
    background: blue;
    display: inline-block;
}

li {
    position: relative;
}

li:before {
    background-color: red;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    transition: width 500ms ease;
}

li:hover:before {
   width: 100%;
}

a {
    text-decoration: none;
    color: #FFF;
    display: inline-block;
    position: relative;
    padding: 20px;
}

<ul>
    <li>
        <a href="#">Test Button</a>
    </li>
</ul>

Fill li item on hover in CSS

5 Answers5