今回の課題

グラデーションボタンとアウトラインボタンを作つくろう！

📖 解説を見る

🎨 ボタンデザインを極きわめよう！

CSSだけでいろいろなボタンが作つくれます。

✏️ グラデーションボタン：

button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 99px;
}

✏️ アウトラインボタン（枠線わくせんだけ）：

button {
  background: transparent;
  border: 2px solid #6366f1;
  color: #6366f1;
}

ヒントを見る

linear-gradient() でグラデーション、background: transparent で透明ボタンを作ろう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: 丸まるいボタン（border-radius: 50%・縦横たてよこ60px）に「+」を表示ひょうじしよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: クリックしたとき（:active）に押おし込こまれる効果こうか（transform: scale(0.95)）を追加ついかしよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: 好すきな色いろで4つのデザインの違ちがうボタンを並ならべよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト22：ボタンをおしゃれにしよう