Estilos CSS para Botón en Header con BEM

Posiblemente has visto el botón en medio de dos secciones y pensaste: ¡que complicado! Pues no lo es tanto. Se lo conoce como botón flotante porque aparentemente no está en ninguna sección, sino en medio de dos, dando la sensación de estar en el aire. La forma de posicionarlo ahí es mucho más sencilla de lo que parece: modificando su position.

Cómo aplicar astilos al botón

Sigue estos pasos:

• Llamamos la clase del botón desde la clase contenedora con .header--title-container .header--button.
• Definimos su posición como absolute. Al hacerlo toma como posición relativa a su padre directo (en este caso el header) y nos permite posicionar el contenido en cualquier parte del contenedor. Recuerda que sólo cuando la posición es absoluta es que podemos añadir un top, bottom, left y right, debido a que está fijo. Esto no pasa si su posición fuera relativa.
• Con left: calc(50% - 118px) le decimos que queremos mantenerlo en el centro con el 50%, pero como el botón es muy grande, que reste 118px a la izquierda, centrándolo.
• Desplazamos hacia abajo el botón del contenedor con un top de 270px.
• Añadimos un margen superior de 35px.
• Añadimos espacio interno con padding: 15px.
• Definimos su ancho en 229px y su altura en 48px.
• Le damos el color de fondo correspondiente con la variable --off-white.
• Agregamos la sombra que le da el efecto de flotar.
• Con border: none quitamos cualquier posible borde que agregue el navegador por defecto.
• Redondeamos los bordes con un border-radius: 5px.
• Ajustamos el tamaño de la fuente en 1.4rem y la hacemos negrita con font-weight: bold.
• Le quitamos el subrayado con text-decoration: none y le damos un color negro con la variable que creamos.

.header--title-container .header--button {
    position: absolute;
    left: calc(50% - 118px);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    /*Sombra*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}

Quedaría de esta manera:

Cómo dar estilos al ícono

• Llamamos la etiqueta span donde crearemos el ícono desde su clase contenedora con .header--button span.
• Definimos el display en inline-block para que se mantenga en el mismo espacio que el texto que lo acompaña.
• Definimos su ancho en 13px y su alto en 8px.
• Añadimos un margin-left: 10px para separarlo un poco horizontalmente del texto.
• Llamamos el archivo del ícono con background-image.

¿Cómo llamar un asset desde otra carpeta?

Si el archivo que quieres llamar está contenido en una carpeta distinta a la de tu documento .css, debes hacerlo llamando a la capeta principal.

Colocas ../ en la url para llevarte a la carpeta anterior y desde ahí buscar el asset. En este caso el archivo está en una carpeta dentro de la carpeta en que está el archivo .css, por lo que pondríamos url(""./assets/icons/down-arrow.svg"").

Recuerda que la url siempre va entre comillas.

.header--button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url(""./assets/icons/down-arrow.svg"");
}

Así quedaría nuestro resultado final:

¡Terminamos el header! Aprendimos y repasamos muchas funciones importantes como posicionar el contenido con flex, definir degradados y a usar calc (te puede salvar de muchos problemas simétricos.

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