Click here to Skip to main content
15,745,148 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have this code in HTML:
<button class="coloring">button</button>

and this in jQuery:
$(".coloring").mouseenter(function() {
  $(this).css({background: "linear-gradient(109.6deg, rgb(135, 168, 254) 11.2%, rgb(254, 165, 197) 100.2%)"});
  $(this).css({background: ""});

and here is a fiddle:
Edit fiddle - JSFiddle - Code Playground[^]
Now what I need to do is to add animation which is fill the button with color from left to right animation.
Here is an example from a website on the navbar:
GAP Polymers | Polymer Distributor | Plastic Resin Supplier[^]
But of course I needed with the colors that I add in the code.

What I have tried:

How can I have this animation?
Updated 30-May-23 3:04am

1 solution

For Chromium-based browsers, you can use the new @property CSS rule to animate the gradient without needing to use Javascript:
@property --a {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
@property --b {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;

button {
    font-size: 3rem;

.coloring {
    transition: --a 1.5s, --b 1.5s;
    background: linear-gradient(109.6deg, rgb(135, 168, 254) var(--a), rgb(254, 165, 197) var(--b), #eee var(--b), #eee 101%);
.coloring:hover {
    --a: 11.2%;
    --b: 100.2%;
@property - CSS: Cascading Style Sheets | MDN[^]

This is not supported in Firefox; the background will not animate, but simply "snap" between the two states.
Share this answer
FRS4002 30-May-23 9:13am    
Thanks it worked! But I need to change the initial color... I need it to be default color. Like for exampe, initial or inherit...
Richard Deeming 30-May-23 9:30am    
The #eee in the linear-gradient is the colour to use when the button isn't hovered. You could try changing that to ButtonFace:
System Colors - <color> - CSS: Cascading Style Sheets | MDN[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900