Dar los toques finales a un botón dentro de una tarjeta de precios marca la diferencia entre un diseño amateur y uno profesional. Aquí se recorre paso a paso cómo aplicar estilos CSS a un botón de call to action, ajustar tipografía, agregar íconos con background image y alinear elementos con vertical-align, todo dentro del flujo de maquetación de una sección de planes.
¿Cómo dar estilos al botón de call to action?
El proceso comienza tomando la clase asignada al botón en el HTML y llevándola a la hoja de estilos. Los estilos se dividen en dos partes: primero el botón como tal y después el span que contiene el ícono [1:00].
Para el botón se definen las siguientes propiedades:
- width de 150 píxeles para controlar el ancho.
- height de 48 píxeles como altura fija.
- margin-top de 20 píxeles para separar el botón del texto superior.
- background-color que reutiliza el mismo color del contenedor principal, obtenido con el color picker del navegador [1:42].
El borde por defecto del botón se elimina y se reemplaza con un border de 2 píxeles, tipo solid, usando una variable CSS llamada bitcoin-orange [2:28]. Para redondear las esquinas se aplica un border-radius de 4 píxeles, logrando un aspecto más suave y consistente con el diseño original [2:50].
¿Qué ajustes de tipografía necesita el botón?
Una vez definida la estructura visual, el siguiente paso es trabajar la fuente interna del botón. Se configuran tres propiedades clave [3:08]:
- font-size de 1.4 rem.
- font-weight con valor bold.
- line-height de 1.8 rem para controlar el espaciado vertical del texto.
El color del texto se asigna mediante la variable CSS black, verificando con las dev tools del navegador que coincida con el valor esperado [3:30].
Un detalle importante surge al inspeccionar la fuente: el botón no estaba tomando la font-family definida en el HTML (DM Sans), sino que usaba Arial como fallback. La solución consiste en declarar explícitamente la propiedad font-family dentro de los estilos del botón, copiando la misma línea usada en el documento principal [3:55]. Esto sucede porque los elementos <button> en HTML no heredan automáticamente la fuente del documento; es necesario forzar esa herencia.
¿Cómo agregar un ícono SVG dentro del botón?
Para el ícono de flecha junto al texto, se trabaja el span que vive dentro del botón. Las propiedades aplicadas son [4:30]:
- display con valor
inline-block para que el elemento sea visible y respete dimensiones.
- width y height de 20 píxeles cada uno.
- background-image usando
url() apuntando a la ruta del archivo SVG, en este caso assets/iconos/orange-right-arrow.svg.
Al guardar y revisar en el navegador, el ícono aparece correctamente [5:08]. Sin embargo, queda un problema de alineación: el texto y el ícono no comparten la misma línea base. Para resolverlo se utiliza la propiedad vertical-align con el valor text-bottom, que alinea el borde inferior del ícono con la base del texto [5:30].
¿Qué pasa con el ancho de la tarjeta?
Al comparar la tarjeta terminada con el diseño de referencia, se nota que el tamaño no coincide del todo. El width configurado en 70% se evalúa contra un posible 65%, pero se decide mantenerlo en 70% porque al agregar las otras dos tarjetas el espacio se redistribuirá naturalmente [5:52].
La tarjeta también maneja límites con min-width de 230 píxeles y max-width de 300 píxeles, asegurando que no se deforme en pantallas muy pequeñas ni muy grandes.
¿Cuál es el reto para las tarjetas restantes?
Con una tarjeta completamente estilizada, el reto es replicar el proceso para las dos tarjetas faltantes. Esto implica posibles conflictos en CSS, ya que las dimensiones actuales están pensadas para una sola tarjeta [6:22]. Las tarjetas adicionales quedarán en disposición vertical inicialmente, y en la siguiente sesión se trabajará el contenedor con un slide horizontal para organizarlas de forma adecuada.
¿Ya terminaste tus dos tarjetas adicionales? Comparte cómo resolviste los conflictos de dimensiones en los comentarios.
