Botão

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 53 de 76.

Desafio

Fácil

Nesta lição, vamos estilizar o botão de envio para torná-lo visualmente atraente. Você aplicará uma cor de fundo, ajustará a cor do texto e o preenchimento, arredondará os cantos e adicionará uma sombra à caixa do formulário para destacá-lo.

Estilize o elemento <button>. Siga as etapas abaixo:

Defina a largura como 100% para que ele preencha todo o espaço.
Aplique uma background-color de sua escolha.
Altere a cor do texto e faça a fonte se destacar.
Adicione padding para melhorar o espaçamento.
Arredonde os cantos.
Aplique a propriedade box-shadow ao botão para destacá-lo do plano de fundo.

Experimente você mesmo

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