The hover effect in CSS brings life to list items when filled with content

Question

The hover effect in CSS brings life to list items when filled with content

I am attempting to create an animation for an <li> element that gives the illusion of a fill effect moving from left to right when hovered over.

This is my current progress:

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;
    /* Older browser support */
    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 encountered a few challenges with this setup. Firstly, the fill effect is currently being applied from right to left instead of the desired left to right motion. Despite multiple attempts at adjusting the background positions, I have been unable to achieve the intended result.

Additionally, I aim to incorporate a small strip of the fill color visible initially, similar to the example by Jay Holtslander found here: https://codepen.io/j_holtslander/full/XmpMEp/

Lastly, the current code structure appears somewhat cumbersome and outdated, sourced from this response dated back in 2013 by beardhatcode. Is there a more contemporary and streamlined approach to achieving this specific effect?

javascript jquery html css

Answer 1

Answer №1

After adjusting the background-position, I expanded the red background slightly more than the blue one, resulting in the intended outcome.

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>

Feel free to check out the updated fiddle here: https://jsfiddle.net/jdLysrn2/1/

Answer 2

After adjusting the background-position, I expanded the red background slightly more than the blue one, resulting in the intended outcome.

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>

Feel free to check out the updated fiddle here: https://jsfiddle.net/jdLysrn2/1/

Answer 3

Answer №2

You can create a unique effect by utilizing the box-shadow CSS property along with the inset value.

ul {
list-style-type: none;
}

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

.uniqueEffect 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;
}
.uniqueEffect li:hover {
    box-shadow: inset 140px 0px 0px red;
}
    
}
.uniqueEffect li:hover {
    background-position:right bottom;
}
.uniqueEffect li a {
    color:white;
}

<div class="uniqueEffect">
<ul>
<li><a href="#">Special Button</a>
</li>
</ul>
</div>

Answer 4

You can create a unique effect by utilizing the box-shadow CSS property along with the inset value.

ul {
list-style-type: none;
}

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

.uniqueEffect 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;
}
.uniqueEffect li:hover {
    box-shadow: inset 140px 0px 0px red;
}
    
}
.uniqueEffect li:hover {
    background-position:right bottom;
}
.uniqueEffect li a {
    color:white;
}

<div class="uniqueEffect">
<ul>
<li><a href="#">Special Button</a>
</li>
</ul>
</div>

Answer 5

Answer №3

Give this a shot, it should do the trick:

.hoverStyle li {
   background: linear-gradient(to left, green 50%, yellow 50%);
   border-left:3px solid green;
}
.hoverStyle li:hover {
    background-position:right;
}

Answer 6

Give this a shot, it should do the trick:

.hoverStyle li {
   background: linear-gradient(to left, green 50%, yellow 50%);
   border-left:3px solid green;
}
.hoverStyle li:hover {
    background-position:right;
}

Answer 7

Answer №4

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="#">Click Here</a>
            </li>
        </ul>
</div>

Answer 8

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="#">Click Here</a>
            </li>
        </ul>
</div>

Answer 9

Answer №5

Give This a Go:

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>

Answer 10

Give This a Go:

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>

The hover effect in CSS brings life to list items when filled with content

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is there a way for me to determine if a user has engaged with a form?

Tips for preserving the integrity of square brackets while extracting data from JSON

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

What are the best ways to stop jQuery events from propagating to ancestor elements?

Can you retrieve the second value using JSON.stringify?

SonarLint versus SonarTS: A Comparison of Code Quality Tools

Define certain variables within a single document that will have an impact on others

Align the center of a grid div that does not contain any items

What is the best way to loop through <div> elements that have various class names using Python 3.7 and the Selenium webdriver?

"Failure in bundling with NodeJS using nexe and fusebox

Customize your webpage's style to reflect your unique identity with user

What is the best way to utilize jspdf for formatting data, specifically when wanting the first column to be in bold?

What steps can I take to prevent BeautifulSoup from interpreting commas as tab characters?

How to extract part of a string delimited by certain characters within GET parameters?

React Native Child Component State Update Issue

Using a regular expression to replace occurrences of a string in Objective-C

Why are my values not being applied to the model class in Angular 7?

Styling your Vuetify V-data-table with CSS

What happens when dynamically loaded static resources are loaded?

Trouble accessing setState within an axios call in ReactJs