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>