マウスオーバーで斜線が加わるボタン

擬似要素を使った装飾例。マウスオーバーで斜線が加わります。

「repeating-linear-gradient」を使えばグラデーションを繰り返して表示させることができるので、画像を使わずにストライプが作れます。傾けて斜線にします。幅も色も自由自在。

斜線が文字と背景の間に入ることが分かるよう、高さをちょっと高めにしています。もう少し低めのほうがしつこくなくていいかも。

コピー＆ペーストでご自由にお使いください。