Botão
Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 53 de 76.
Desafio
FácilNesta 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 (box-shadow) ao formulário para fazê-lo se destacar.
Estilize o elemento <button>. Siga os passos abaixo:
- Defina a width para 100% para que ele preencha todo o espaço.
- Aplique uma background-color de sua escolha.
- Altere a text color e faça a fonte se destacar.
- Adicione padding para melhorar o espaçamento.
- Arredonde os cantos.
- Aplique uma propriedade box-shadow ao botão para fazê-lo se destacar do 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>
Todas as lições de Styling with CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento de TextoDecoração de TextoDesafio de Recapitulação nº 1Desafio de Recapitulação nº 27Modelo de Caixa Parte 1
O que é o Modelo de Caixa?PaddingMargensBordasLargura e AlturaDesafio de Revisão
3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é Flex Box?Flex DirectionJustify ContentAlign ItemsO Centro PerfeitoDesafio de Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta Tag ViewportLayouts FluidosUnidades de ViewportFundamentos de Media QueriesImagens Flexíveis