Botón

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 53 de 76.

Desafío

Fácil

En esta lección, daremos estilo al botón de envío para hacerlo visualmente atractivo. Aplicarás un color de fondo, ajustarás el color del texto y el relleno, redondearás las esquinas y añadirás una sombra de caja al formulario para que destaque.

Da estilo al elemento <button>. Sigue los pasos a continuación:

Establece el ancho en 100 % para que ocupe todo el espacio.
Aplica un background-color de tu elección.
Cambia el color del texto y haz que la fuente destaque.
Añade relleno para mejorar el espaciado.
Redondea las esquinas.
Aplica la propiedad box-shadow al botón para que destaque sobre el fondo.

Pruébalo tú mismo

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