ボタン

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 53/76。

チャレンジ

簡単

このレッスンでは、送信ボタンをスタイリングして視覚的に魅力的なものにします。背景色の適用、テキストの色とパディングの調整、角の丸み付け、そしてフォームを際立たせるためのボックスシャドウ（box-shadow）の追加を行います。

<button>要素をスタイリングします。以下の手順に従ってください：

スペース全体を埋めるように、widthを100%に設定します。
お好みのbackground-colorを適用します。
text colorを変更し、フォントを際立たせます。
間隔を改善するためにpaddingを追加します。
角を丸くします。
ボタンを背景から際立たせるために、box-shadowプロパティを適用します。

自分で試してみよう

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>