コント：背景を切り取りすぎるギャル

※コードは下部へ

コード解説編

背景ならグラデーションにできる

CSSでは文字色は１色のみの指定になりますが、backgroundはグラデーションにできます。これを利用してタイトルなどの文字を配置する場所を指定して、そこにグラデーションをかけます。

その後、文字でマスクする、という方法です。

HTML

<div id=”col_btn”>
<a href=”menu.html”><h2>VIEW MENU</h2></a>
</div>

CSS:background-clipで背景を文字で切り抜く

CSS

#col_btn h2{
color:#5a2b15;
font-size: 18px;
letter-spacing: 0.07em;
display:inline-block;
position:relative;
padding:10px 0 8px 0;
cursor: pointer;
}


#col_btn h2:hover{
color: #ACB6E5;
background: -webkit-linear-gradient(45deg, #ff51e8,#ffd45d,#ff48e0);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

例ではホバーにした時にグラデになるようにしてますが、普通に指定してもいいと思います。ブラウザが対応してない場合に備えて、一応colorも指定しています。