Estilizar un botón en CSS y manejar los espacios alrededor de los elementos son dos habilidades fundamentales para construir interfaces atractivas. Aquí aprenderás a darle vida al botón de la primera pantalla de un juego usando bordes, tipografías personalizadas y la propiedad margin con sus distintas variantes. [00:08]
La idea es sencilla: tomar un botón sin estilos y convertirlo en un elemento que combine con el diseño general, mientras dominas cómo controlar el espaciado en cada uno de sus lados.
¿Cómo aplicar estilos básicos a un botón en CSS?
Desde el inspector del navegador puedes tantear los valores antes de llevarlos al código. Eso te ayuda a ver en tiempo real cómo se comporta tu botón.
Los estilos iniciales que se aplican son:
- Un width similar al de las tarjetas o un poco menor.
- Un height de 40 píxeles.
- Un border-radius de 20 píxeles para esquinas redondeadas.
- Un background en transparent para que no tenga relleno.
- Un border de 2 píxeles, sólido y en color white.
- Un color blanco en el texto para mejorar el contraste sobre el fondo azul. [01:25]
¿Por qué un botón no toma la tipografía del resto de la página? Porque los botones traen una font family por defecto del navegador. Debes asignarle explícitamente la fuente desde su selector en CSS. [02:30]
Para aplicar estos estilos al botón correcto, se usa el selector de ID #botón-mascota, que ya estaba definido en el HTML desde clases anteriores.
¿Cómo importar y combinar dos tipografías de Google Fonts?
Usar más de una tipografía aporta jerarquía visual. Aquí se combinan Fredoka (más gruesa, ideal para títulos) y Poppins (más ligera, ideal para texto general).
El proceso en Google Fonts es directo:
- Buscar la fuente Poppins y elegir un grosor de 300.
- Añadirla a la selección junto con Fredoka.
- Copiar el bloque de importación que une ambas fuentes.
- Pegarlo en el CSS reemplazando la importación anterior. [03:45]
Después, en el selector body se asigna Poppins como fuente general, mientras que Fredoka se reserva solo para el título. Para el botón se aplica también Poppins dentro de su selector específico.
¿Qué es la propiedad font family en CSS? Es la propiedad que define qué tipografía usa un elemento. Si no la declaras, el navegador aplica una fuente por defecto, especialmente en botones e inputs.
¿Cómo funciona la propiedad margin con sus cuatro valores?
La propiedad margin controla el espacio externo de un elemento. Lo interesante es que puede recibir hasta cuatro valores distintos, uno por cada lado, siguiendo el sentido de las manecillas del reloj.
El orden es: arriba, derecha, abajo, izquierda. Por ejemplo:
css
margin: 30px 20px 10px 5px;
Esto aplica 30 píxeles arriba, 20 a la derecha, 10 abajo y 5 a la izquierda. Lo puedes verificar visualmente en el modelo de caja del inspector. [05:50]
¿Cuándo usar margin-top, margin-right, margin-bottom o margin-left?
Cuando solo necesitas espacio en un lado, las propiedades específicas son más limpias y legibles que escribir ceros en los demás valores.
- margin-top para el espacio superior.
- margin-right para el espacio derecho.
- margin-bottom para el espacio inferior.
- margin-left para el espacio izquierdo. [07:10]
En el botón del juego, basta con un margin-top: 30px; para separarlo de las tarjetas que están arriba. Esa es la solución más directa y específica.
¿Cuál es la diferencia entre margin con cuatro valores y margin-top? Margin con cuatro valores define todos los lados a la vez. Margin-top solo modifica el lado superior, sin afectar los demás. Usa la versión específica cuando solo necesitas un lado.
¿Qué resultado se obtiene al combinar bordes, tipografía y margin?
El botón pasa de ser un elemento plano y sin personalidad a integrarse con el resto del diseño. El borde blanco delgado, el fondo transparente y la fuente Poppins en peso ligero crean un botón limpio que respira gracias al margen superior.
Desde aquí puedes experimentar:
- Cambiar el tamaño del borde para hacerlo más prominente.
- Ajustar el border-radius para esquinas más cuadradas o más redondas.
- Probar otros pesos de Poppins, como 400 o 500.
- Modificar el margin-top según el espacio que necesites.
La primera pantalla del juego queda completa con estos ajustes, lista para pasar a estilizar la segunda. ¿Qué cambio le harías tú al botón para darle aún más personalidad? Cuéntame en los comentarios.
