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?

javascriptjqueryhtmlcss

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

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 №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 №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 №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered when attempting to use _id from a different collection due to a duplicate key

In my database, I currently have 2 collections set up. The first one is a 'Users' collection (which is functioning properly), and the other is a 'Rooms' collection (both designed for a chat application). I am looking to ensure that e ...

javascriptnode.jsmongodbmongoosemongoose-schema

How do I execute 2 functions when the button is clicked?

<button id="take-photo"> Take Image</button> <button type="submit" value="Submit" >Submit </button> How can I trigger two tasks with a single button click? 1. Executing a function based on ID Next 2. Submitting the form with ...

javascripthtml

How to Convert Irregular Timestamps in Node.js?

Currently, I am utilizing an API to retrieve information from Google News and proceed to save the data in Firestore. The challenge lies in the fact that the API delivers timestamps in various formats which are not uniform. For example: "1 Day Ago", "June ...

javascriptnode.jsarraysdatetimegoogle-cloud-firestore

Using JS or jQuery to organize JSON data into a multidimensional array

Dealing with frontend processing of a response from a server that provides event reviews for the season has been challenging. In this case, there can be multiple reviewers for the same event and the simplified version of the response appears as follows: [ ...

javascriptjqueryarrays

I am currently having issues with a PHP script I wrote for sending email, as it is

After creating a form and implementing a PHP script to send an email upon form submission, I encountered an issue where the "Thank you" message was displayed on a different HTML page, but the email wasn't sent to my account. I uploaded the files to t ...

phphtmlwampserver

"Error" - The web service call cannot be processed as the parameter value for 'name' is missing

When using Ajax to call a server-side method, I encountered an error message: {"Message":"Invalid web service call, missing value for parameter: \u0027name\u0027.","StackTrace":" at System.Web.Script.Services.WebServiceMethodData.CallMethod(O ...

javascriptc#jqueryhtmlajax

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

javascripthtmljquerycssreactjs

Utilizing react-query and next.js to pre-fetch initial data and automatically re-fetch when a filter is modified

In my NextJs project, I am attempting to prefetch data using react-query. The initial data should only be updated if the filter is modified. To manage the filter states, I have implemented State Hooks. function JobSearch(props) { const [pageNumber, setPa ...

javascriptreactjsreact-hooksnext.jsreact-query

Issue with react-native-svg ForeignObject missing in project (React Native with Expo using TypeScript)

I am working on a React Native project in Expo and have incorporated the expo TypeScript configuration. Using "expo install," I added react-native-svg version 9.13.3 to my project. However, every time I attempt to render the SVG using react-native-svg, I ...

javascripttypescriptreact-nativeexporeact-native-svg

The subpage on Github Pages is failing to load despite the correct URL being entered

While working on a multipage website using React and hosting it on Github pages, I encountered an issue. The website functions perfectly on localhost, but encounters errors when accessing a subpage on Github pages. Upon clicking the subpage link, Github p ...

htmlreactjsreact-routergithub-pages

In jQuery, conditionally nest divs within another div based on a specific requirement

There is a container with multiple nested elements that need to be rearranged based on the value of their custom attribute. The goal is to reorder those elements at the end of the container if their 'data-keep-down' attribute is set to true, usin ...

javascriptjqueryhtml

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Seeking assistance in creating a crossfading image gallery using jQuery and the .animate() function. I'm struggling to solve the issue of smooth fadeIn for the next image while maintaining compatibility with IE8. https://jsfiddle.net/Vimpil/fqhc1e9m/ ...

javascriptjqueryhtmljquery-animatecross-fade

JavaScript encoding and decoding challenges

Can anyone help me figure out what's wrong? I'm trying to encode and decode a simple input, but it just doesn't seem to work! Any ideas why? Thanks in advance for your assistance :) ENCODE: function encryption_encode(s, delta) { var te ...

javascripthtmlcssdecodeencode

What is the best way to ensure a textarea remains expanded when the parent element is in focus?

I have successfully implemented a textarea box that expands upon click and retracts when it loses focus. However, I am facing an issue where if the textbox is already in expanded form, I want it to stay expanded if the user clicks anywhere within the cont ...

javascripthtmlcss

What is the best way to make sure flexbox items fill in any available space?

I am currently working on a website project, and I am looking to display text content in two columns using flexbox with each column taking up 50% of the width. However, I am encountering an issue as illustrated in the image below: Instead of leaving the t ...

htmlcssflexbox

Error encountered when trying to send form data through an AJAX request

Whenever a user updates their profile picture, I need to initiate an ajax call. The ajax call is functioning properly, but the issue lies in nothing being sent to the server. <form action="#" enctype='multipart/form-data' id="avatar-upload-fo ...

javascriptphpjqueryajaxlaravel

Angular 2's Conditional Validation: A Comprehensive Guide

Angular 2 offers straightforward validation, which is a great feature. However, the challenge lies in making a required field optional based on another field's selection. Below are the validation rules: this.contractsFilter = this.fb.group({ selec ...

javascriptangularvalidation

Utilize jQuery to apply inline styles to dynamically created div elements

I am attempting to apply inline styles to a div using jQuery. The current state of the div, as seen in Firebug, is shown below: https://i.sstatic.net/rqhIc.jpg My goal is to retain the existing CSS while adding margin-left:0 and margin-right:0 to the cur ...

javascriptjqueryhtmlcsswordpress

Implementing image change on dropdown selection using jQuery click event

I'm new to Jquery and JavaScript. I have a dropdown in my Keen template that displays 2 flags. I want to be able to click on the dropdown and select the corresponding flag. Most of the examples I found online use the select and options tags, but my co ...

javascriptjqueryhtml

The process of incorporating external JavaScript scripts into VueJS Components

I currently have two external scripts that need to be used for the payment gateways. At the moment, both scripts are placed in the index.html file. However, I prefer not to load these files at the beginning of the process. The payment gateway is only re ...

javascriptvue.jsvuejs2vue-componentvue-router