疑似要素でグラデーションをつける方法を紹介します。擬似要素で白のグラデーションを作って、それを背景色に重ねることでグラデーションの効果をつけています。
HTML
補足
- サンプルでは button クラスで span 要素をブロック化しています。
- 背景色は col1 ～ col4 クラスで付けています。
- 白のグラデーションは gradient クラスで付けています。サンプルでは左上から右下方向へグラデーションを付けています。
CSS
補足
- グラデーションは gradient クラスの after 疑似要素で付けています。
- after 要素をブロック化し、gradient クラスの要素と同じ大きさにして、重ねて表示しています。
- 背景色は col1 ～ col4 クラスで付けています。