Botón
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 53 de 76.
Desafío
FácilEn esta lección, daremos estilo al botón de envío para que sea 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 (box-shadow) al formulario para que destaque.
Dale estilo al elemento <button>. Sigue los pasos a continuación:
- Establece el width al 100% para que ocupe todo el espacio.
- Aplica un background-color de tu elección.
- Cambia el color de texto y haz que la fuente destaque.
- Añade padding para mejorar el espaciado.
- Redondea las esquinas.
- Aplica una propiedad box-shadow al botón para que destaque del 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>
Todas las lecciones de Styling with CSS
4Fundamentos del texto
Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #27Modelo de caja - Parte 1
¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso
3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box12Fundamentos de Diseño Responsivo
¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles