カラー
Coddyの「CSSプロジェクト - おしゃれなボタン」コースのレッスン 4/8。
背景色とテキストの色は、ボタンをスタイリングする際に最も重要な要素の1つです!
読みやすさのために色のコントラストに注意することが重要です。背景色が暗い場合は、テキストの色を明るくする必要があります。
暗い色の例:
- 黒
- 青
- 赤
- 茶色
明るい色の例:
- 白
- 黄色
- ピンク
チャレンジ
簡単タスク:
- ボタンのテキストの色を
whiteに設定してください - ボタンの背景色を暗い色に設定し、十分なコントラストがあることを確認してください!
ヒント:
(色を調整して)線形グラデーションの背景色を設定できます。
background: linear-gradient(rgb(6, 6, 209), rgb(46, 46, 219));または、角度(例:45度)を指定することもできます。
background: linear-gradient(45deg, rgb(6, 6, 209), rgb(46, 46, 219));自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>