Pulsante

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 53 di 76.

Sfida

Facile

In questa lezione, daremo stile al pulsante di invio per renderlo visivamente accattivante. Applicherai un colore di sfondo, regolerai il colore del testo e il padding, arrotonderai gli angoli e aggiungerai un box-shadow al modulo per farlo risaltare.

Dai stile all'elemento <button>. Segui i passaggi qui sotto:

Imposta la width al 100% in modo che occupi tutto lo spazio.
Applica un background-color a tua scelta.
Cambia il colore del testo e fai risaltare il carattere.
Aggiungi padding per migliorare la spaziatura.
Arrotonda gli angoli.
Applica la proprietà box-shadow al pulsante per farlo risaltare sullo sfondo.

Provalo tu

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