Estilos CSS avanzados para botones y tarjetas en HTML

Para terminar esta sección ya sólo nos queda el call to action y podremos pasar a crear los slides entre las tarjetas. El botón que tenemos ahora es el típico que nos genera la etiqueta button. Para cambiarlo, vamos a la hoja de estilos de nuestro proyecto.

Cambiar el botón por defecto

• Llamamos la clase del botón con .plan-card–ca.
• Le damos un ancho de 150px y un alto de 48px.
• Añadimos un margen superior de 20px.
• Cambiamos su color de fondo a #faf8f7 de acuerdo al proporcionado en el diseño.
• Establecemos el grosor del borde en 2px y le damos el color de la variable –bitcoin-orange.
• Redondeamos ligeramente las esquinas con border-radius: 4px.
• En caso que no se aplique la fuente que establecimos al inicio del documento, la traemos y la pegamos en el estilo actual con font-family: ‘DM Sans’, sans-serif.
• Ajustamos el tamaño de fuente en 1.4rem y su peso en bold.
• Le damos un interlineado de 1.8rem y el color de la variable –black.

.plan-card--ca {
    width: 150px;
    height: 48px;
    margin-top: 20px;
    background-color: #faf8f7;
    border: 2px solid var(--bitcoin-orange);
    border-radius: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--black);
}

Cómo modificar el Ícono

• Llamamos la etiqueta span contenedora de nuestro ícono desde la clase del botón con .plan-card–ca span.
• Usamos display: inline-block para que se mantengan en la misma línea que el texto.
• Le damos un ancho y alto de 20px.
• Insertamos el ícono con un ***background-image: url("")***.
• Para poder colocar el ícono a la misma altura del texto, usamos vertical-align: text-bottom.

.plan-card--ca span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("./assets/icons/orange-right-arrow.svg");
    vertical-align: text-bottom;
}

Tendríamos este resultado renderizado en nuestro navegador:

¡Y con este terminamos los estilos de esta tarjeta! Sólo nos queda el slide que se genera de manera horizontal.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).