Bouton

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

Défi

Facile

Dans cette leçon, nous allons styliser le bouton d’envoi pour le rendre visuellement attrayant. Tu appliqueras une couleur d’arrière-plan, ajusteras la couleur du texte et les marges intérieures, arrondiras les coins et ajouteras une ombre portée au formulaire pour le mettre en valeur.

Stylise l’élément <button>. Suis les étapes ci-dessous :

Définis la width à 100 % afin qu’il remplisse tout l’espace.
Applique une background-color de ton choix.
Modifie la text color et fais ressortir la police.
Ajoute du padding pour améliorer l’espacement.
Arrondis les coins.
Applique 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>