渐变色如何做移入效果？

今天，我们ui设计出来的按钮都是渐变色的，移入效果有点烦，记录一下，说实话，就这个移入效果我想了近半小时。

分享一下，慢慢填充颜色的感觉

.button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 200%;
      transform: translateX(0);
      background-image: linear-gradient(to right, white 0%, black 50%);    
      transition: transform 0.3s ease;
      border-radius: inherit;
      z-index: -1;
    }

    &:not([disabled]):hover {
      &::before {
        transform: translateX(50%);
      }
    }
}

前端的苦前端自己吃。

不要和比人争论什么