Bouton

Fait partie de la section Styling with CSS du Journey HTML de Coddy. Leçon 53 sur 76.

Défi

Facile

Dans cette leçon, nous allons styliser le bouton de soumission pour le rendre visuellement attrayant. Vous appliquerez une couleur d'arrière-plan, ajusterez la couleur du texte et le rembourrage, arrondirez les coins et ajouterez une ombre portée (box-shadow) au formulaire pour le faire ressortir.

Stylisez l'élément <button>. Suivez les étapes ci-dessous :

Définissez la width à 100% pour qu'il remplisse tout l'espace.
Appliquez une background-color de votre choix.
Changez la text color et faites ressortir la police.
Ajoutez du padding pour améliorer l'espacement.
Arrondissez les coins.
Appliquez une propriété box-shadow au bouton pour le faire ressortir de l'arrière-plan.

Essayez vous-même

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