• 操作
  • テキストリンクホバー

#text link hover 008

テキスト下に色面が表示

参考サイトURL
動きの解説

テキストの下層に蛍光ペンを引いたような色面（マーカー）が現れる動きは、重要なキーワードを強調し、教科書の大事な部分をなぞるような「注目」を促します。背景色全体を変えるボタンよりも軽やかで、文章中のリンクとして馴染みます。linear-gradientを背景画像として使い、background-sizeの横幅を0%から100%に変化させることで実装します。色面の高さを文字の下半分だけにすると、抜け感のあるカジュアルな装飾になります。