Reputation: 2983
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?
Upvotes: 2
Views: 589
Reputation: 12969
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>
Upvotes: 0
Reputation: 93
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>
Upvotes: 1
Reputation: 1
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>
Upvotes: 0
Reputation: 573
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;
}
Upvotes: 0
Reputation: 3642
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/
Upvotes: 1