戻る
#0202004 タップでプレビュー
<button class="c-linkSlot-2"><span>No hover</span></button>
.c-linkSlot-2 {
  display: block;
  padding: 4px 8px;
  overflow: hidden;
  border: #fff 1px solid;
}

.c-linkSlot-2 span {
  display: block;
  position: relative;
  color: #fff;
  text-align: center;
  transition: 0.3s;
  text-shadow: rgba(255, 255, 255, 0) 0px 30px 0px;
}

.c-linkSlot-2:hover span {
  color: transparent;
  transform: translateY(-30px);
  text-shadow: white 0px 30px 0px;
}
.c {
  &-linkSlot-2 {
    display: block;
    padding: 4px 8px;
    overflow: hidden;
    border: #fff 1px solid;

    span {
      display: block;
      position: relative;
      color: #000;
      text-align: center;
      transition: 0.3s;
      text-shadow: rgba($color: #fff, $alpha: 0) 0px 30px 0px;
    }

    &:hover {
      span {
        color: transparent;
        transform: translateY(-30px);
        text-shadow: rgba($color: #fff, $alpha: 1) 0px 30px 0px;
      }
    }
  }
}
p