Button
Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 53 von 76.
Aufgabe
EinfachIn dieser Lektion werden wir den Absende-Button gestalten, um ihn optisch ansprechend zu machen. Du wirst eine Hintergrundfarbe anwenden, die Textfarbe und das Padding anpassen, die Ecken abrunden und dem Formular einen Box-Shadow hinzufügen, damit es hervorsticht.
Gestalte das <button>-Element. Befolge die folgenden Schritte:
- Setze die width auf 100%, damit sie den gesamten Raum 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 eine box-shadow-Eigenschaft auf den Button an, damit er 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>
Alle Lektionen in Styling with CSS
4Text-Grundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #2
5Farben und Hintergründe
HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #111Layout-Techniken
Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge14Abschluss-Herausforderungen
Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung3Grundlegende Selektoren
Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung9Flexbox
Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung12Grundlagen des Responsive Designs
Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder