ホバーエフェクト
Coddyの「CSSプロジェクト - おしゃれなボタン」コースのレッスン 7/8。
ボタンをホバーしたときにエフェクトを追加しましょう！
ホバー時にボタンを変更するには、:hover 疑似クラスを使用します。
.fancyButton:hover {
background-color: red;
}上の例では、ホバーするとボタンが赤くなります！
トランジションをスムーズにするには、次のように記述します。
.fancyButton {
...
transition: all 0.2s;
}トランジションの時間（0.2s）を調整してみてください。
チャレンジ
簡単ボタンにホバー効果を追加して、素敵にしましょう！
必要なタスク：
- ボタンに transition プロパティを追加してください。タイミングは任意ですが、1秒以下に設定してください。
- ホバー時のボタン効果に
opacity: 0.8;を追加してください。
ホバー時に変更することが推奨される、オプションのプロパティ：
- 影 (
box-shadow) - 背景色
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>