On hover fill button background from bottom to top and text color from bottom to top

user_7624544 0
Viewed 2771

I need to create button and on hover it has to not only fill background color from bottom to top but also change text color from bottom to top.

I am alright with this approach here: CSS: Background fills on hover from bottom to top:

but it has to change also the inner text color from bottom to top

<style>
 a {
            background-image: linear-gradient(to top, yellow 50%, transparent 50%);
            background-size: 100% 200%;
            background-position: top;
            transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/
            color: black;
        }

        a:hover {
            background-position: bottom;
        }
</style>
 <a href="#">I'm a link</a>
 <a href="#">I'm another link</a>

Here is screenshot of what exactly do I need: Here's a link to screenshot!

css
1 Answers

Consider an extra layer for the background and color the text using a background too. Then simply animate both of the them the same way:

a {
  padding:20px;
  display:inline-block;
  border:1px solid #000;
  position:relative;
  text-decoration:none;
  font-weight:bold;
  font-size:20px;

  background-image: linear-gradient(to top, red 50%, #000 50%);
  
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
a:before {
  content:"";
  z-index:-1;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: linear-gradient(to top, yellow 50%, transparent 50%);
}

a,
a:before {   
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.5s ease-in-out;
}

a:hover,
a:hover:before{
  background-position: bottom;
}
<a href="#">I'm a link</a>
<a href="#">I'm another link</a>

You can also do it as multiple background without the need of extra element (not working on Fiferox)

a {
  padding:20px;
  display:inline-block;
  border:1px solid #000;
  position:relative;
  text-decoration:none;
  font-weight:bold;
  font-size:20px;

  background-image: 
    linear-gradient(to top, red 50%, #000 50%),
    linear-gradient(to top, yellow 50%, transparent 50%);
  
  -webkit-background-clip: text,padding-box;
  background-clip: text,padding-box;
  -webkit-text-fill-color: transparent;
  color: transparent;  
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.5s ease-in-out;
}

a:hover{
  background-position: bottom;
}
<a href="#">I'm a link</a>
<a href="#">I'm another link</a>

user_86203330
Related