![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rTLfzSuQ8C1lq5VtJZ-i8udIjpTnPkBzpWeoYfFgEhInQA76x8VCQtYhyphenhyphenQLYN7AX7TU30p84eOIhWAZAG_wCSG6wlMZBCXw280LIqBsinisomOnTjCYAsPq4g1aqp2VcWseDBFCZLvAR/s1600/SnapCrab_NoName_2017-4-19_10-20-52_No-00.png)
疑似要素でグラデーションをつける方法を紹介します。擬似要素で白のグラデーションを作って、それを背景色に重ねることでグラデーションの効果をつけています。
HTML
補足
- サンプルでは button クラスで span 要素をブロック化しています。
- 背景色は col1 ~ col4 クラスで付けています。
- 白のグラデーションは gradient クラスで付けています。サンプルでは左上から右下方向へグラデーションを付けています。
CSS
補足
- グラデーションは gradient クラスの after 疑似要素で付けています。
- after 要素をブロック化し、gradient クラスの要素と同じ大きさにして、重ねて表示しています。
- 背景色は col1 ~ col4 クラスで付けています。