悬停时从下到上填充按钮背景，从下到上填充文本颜色

Question

我需要创建按钮，并且在悬停时它不仅必须从下到上填充背景颜色，而且还必须从下到上更改文本颜色。

我对这种方法很满意： CSS：背景从下到上悬停填充：

但它还必须从下到上更改内部文本颜色

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

这是我到底需要什么的屏幕截图：这是屏幕截图的链接！

Answer 1

考虑为背景添加一个额外的图层，并使用背景为文本着色。然后以相同的方式简单地为它们设置动画：

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>

您也可以将其作为多个背景，而不需要额外的元素（不适用于 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>