ボタンに光沢感を付ける

ボタンや見出しなど（色付きのブロック要素）に光沢感を付ける。

デモページを表示

CSS

補足

• 対象となるブロック要素を擬似要素で覆い、その疑似要素のグラデーションで光沢感を付ける。
• 13行目：linear-gradient で光沢感の仕様を設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• 光沢感を付けるブロック要素に add-gloss クラスを設定する。

CSSによるボタンのデザイン

CSSを使ったボタンの簡単なデザイン例。

デモページを表示

CSS

補足

• 標準のボタンのスタイルを基に、適宜必要なスタイルを追加・上書きしていく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• span や a 要素に、標準のボタンのクラス（ "btn" ）を付ける。