How do I gradually change the background color of a element from left to right

Question

Am trying to use keyframes to change the background color of an a tag

My code:

.button-container {
  width: 200px;
  height: 40px;
  display: flex;
  margin: 0 auto;

}
.button-container a{
  width: inherit;
  height: inherit;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right, #000, #000);
}

.button-container:hover a{
  animation: colorswitch 5s linear;
}

@keyframes colorswitch {
  from { 
    background-image: linear-gradient(to right, #ddd , #ddd);
  }
  to { 
    background-image: linear-gradient(to right, #ddd , #ddd);
  }
}

 <div class="button-container">
   <a href="#">View here</a>
 </div>

How can I change the background color of the a tag from #000 to #ddd moving from left to right when I hover over it?

So background image is a non animatable property. However you could animate background-position to sort of slide a gradient over the background of your element, which might be an acceptable effect. — WillD, Apr 06 '20 at 14:55
from the duplicate: https://stackoverflow.com/a/58452190/8620333 — Temani Afif, Apr 06 '20 at 15:09

WillD · Accepted Answer · 2020-04-06T15:12:44.143

1

Here's a pattern using linear gradent, background position, and css transition.

Right to left:

button {
  background-image: linear-gradient(to right, red 40%,  blue 60%);
    
 background-size: 300% 100%;
  transition: background-position .5s;
  background-position: 0;
  
  border: none;
  padding: 1em;
}


button:hover {
   background-position: 100%;
}

<button>A button</button>

Left to right:

button {
  background-image: linear-gradient(to right, red 40%,  blue 60%);
    
 background-size: 300% 100%;
  transition: background-position .5s;
  background-position: 100%;
  
  border: none;
  padding: 1em;
}


button:hover {
   background-position: 0%;
}

<button> A button</button>

edited Apr 06 '20 at 15:12

answered Apr 06 '20 at 15:03

WillD

5,170
6
27
56

how can I make this move from left to right instead? I tried changing to "left" in the linear gradient but I didn't work. – Sidney Sousa Apr 06 '20 at 15:08
edited to include both directions – WillD Apr 06 '20 at 15:12
And that's it. Appreciate the support – Sidney Sousa Apr 06 '20 at 15:16

How do I gradually change the background color of a element from left to right

1 Answers1