<section>
  <h2>グラデーションマスク</h2>
  <div class="item_text item_text01">
    <span>テキスト</span>
  </div>
</section>

<section>
  <h2>マスクを利用したhover</h2>
  <div class="item_text item_text02">
    <a href="#">ボタン</a>
  </div>
</section>
body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  padding: 20px;
}
section + section{
  margin-top: 40px;
}
h2{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.item_text{
  font-size: 50px;
  background-clip: text;
  -webkit-background-clip: text;
  heigth: 90px;
}
.item_text span,
.item_text a{
  color: transparent;
  font-size: inherit;
  font-weight: bold;
  display: block;
  line-height: 1;
}

.item_text01{
  width: 4.5em;
  background-image: linear-gradient(39deg, rgba(255,236,147,1) 0%, rgba(18,221,251,1) 100%);
  background-size: 100% auto;
  background-position: top left;
  transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.item_text02{
  width: 3.5em;
  background-image: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(222,0,0,1) 50%, rgba(222,0,0,1) 100%);
  background-position-x: 100%;
  background-size: 200% auto;
  transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.item_text02:hover{
  background-position-x: 0%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.