疑似要素と CSS で立体感のあるボタンのデザイン

疑似要素で "テカリ" の部分を作り、立体感のあるボタンをデザインしてみました。

HTML

補足

• span 要素に button クラスを付けて、ボタン風のデザインにします。

CSS

補足

• button クラスで span 要素をブロック化し、背景色や角丸、カーソルの形などを設定して、ボタン化しています。
• ボタンの上半分のテカっているところは、button クラスの疑似要素 :before を CSS でデザインして、 span 要素に重ねています。

サンプル

「疑似要素と CSS で立体感のあるボタンのデザイン」のサンプル