Schaltfläche

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 53 von 76.

Aufgabe

Einfach

In dieser Lektion gestalten wir die Schaltfläche zum Absenden, damit sie optisch ansprechend wirkt. Du wendest eine Hintergrundfarbe an, passt die Textfarbe und den Innenabstand an, rundest die Ecken ab und fügst dem Formular einen box-shadow hinzu, damit es hervorsticht.

Gestalte das <button>-Element. Befolge die folgenden Schritte:

Setze die width auf 100 %, damit sie den gesamten verfügbaren Platz ausfüllt.
Wende eine background-color deiner Wahl an.
Ändere die text color und sorge dafür, dass die Schrift hervorsticht.
Füge padding hinzu, um die Abstände zu verbessern.
Runde die Ecken ab.
Wende die Eigenschaft box-shadow auf die Schaltfläche an, damit sie sich vom Hintergrund abhebt.

Probier es selbst

<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>