<a href="#" class="cle-slide"><span>WATCH FILM</span></a>

.cle-slide {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  color: #f0eeff;
  font:
    700 13px/1.2 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.cle-slide span {
  position: relative;
  mix-blend-mode: difference;
  color: #fff;
  z-index: 1;
}
.cle-slide::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: #fff;
  transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}
.cle-slide:hover::before,
.cle-slide:focus-visible::before {
  height: 100%;
}