No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso de position para bot贸n flotante

11/32
Recursos

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鈥搕itle-container .header鈥揵utton.
  • 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 鈥搊ff-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:
como hacer un bot贸n flotante

C贸mo dar estilos al 铆cono

  • Llamamos la etiqueta span donde crearemos el 铆cono desde su clase contenedora con .header鈥揵utton 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:
como dar estilos al bot贸n flotante

隆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).

Aportes 164

Preguntas 61

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Les comparto otras alternativas para posicionar el bot贸n (quitando el margin-top):

Usando calc() tambi茅n en top:

.header__title-container .header__button {
	position: absolute;
	top: calc(100% - 24px);
	left: calc(50% - 114.5px);
}

Usando translate():

.header__title-container .header__button {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -24px);
}

Si son unos enfermos de la simetria como yo jeje, se tiene que tomar el 50% del total del width del contenedor en este caso 229px y quedaria asi:
left: calc(50% - 114.5px);

Una forma m谩s f谩cil de centrar al bot贸n ser铆a as铆:

    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
}```

Creo que es m谩s sencillo, queda perfectamente alineado sin necesidad de hacer c谩lculos nosotros mismos.

A m铆 me daba problemas el icono down-arrow porque hab铆a descargado de Figma lo que pone #mdi_keyboard_arrow_down.
Descargando en su lugar donde pone Vector me queda como al profe.

Hola 馃槃

Espero terminar la escuela de desarrollo web creandole una pagina web a mi esposa

Vengo a ahorrarles dolores de cabeza
Tengan cuidado con los espacios en la opcion calc por que de lo contrario no tomara el estilo.

Saludos comunidad

Leyendo los comentarios de la comunidad me di cuenta que mi proyecto corria peligro de romperse ya que todas mis unidades de medida estaban en rem, por lo que si el usuario hacia ajustes del tama帽o de fuente en su navegador, todo el dise帽o seria distinto. Asi que cambie todas ellas a px de inmediato! pero鈥 jugando con las dimensiones de fuente en el navegador (especificamente chrome) mi dise帽o se rompia igual, pero entendi el porque.
Cuando el font size del texto crece (al ajustar la configuracion del navegador) lo hace hacia abajo junto a su line height y el contenido puede quedar debajo de algun elemento flotante (como el boton del header en posicion absolute en este proyecto).
Usando esta linea de codigo css en el header:

height: 353px;

con una configuracion de mi browser de:

el proyecto se rompe de esta manera:

pero鈥

con este codigo en el header:

height: 35.3rem;

y la misma configuracion del navegador, el proyecto quedaba asi:

Por lo tanto podriamos concluir que鈥

De preferencia ajustar propiedades verticales que NO sean font-size usando rem.

Esto lo descubri jugando con el tama帽o de fuente del navegador y las propiedades rem y px.
De seguro deben haber buenas practicas sobre el tema ahi fuera u optimizaciones para proyectos web a todo terreno. Si conoces mas informacion sobre el tema suma tu comentario, hagamos debate e intercambio de ideas. Ese conocimiento nos ayudara a todos!

Les comparto info sobre la funci贸n CALC.

La funci贸n CSS Calc() permite realizar operaciones con los valores de propiedades CSS.
Se puede usar para operar con medidas, frecuencias, 谩ngulos, tiempo, porcentajes, n煤meros y enteros.

Sintaxis:

/*Propiedad: calc ( expresi贸n)*/
width: calc(100% - 80px);

Se pueden utilizar operaciones de suma (+), resta (-), multiplicaci贸n (*) y divisi贸n (/). En el caso de la suma y resta, es necesario siempre dejar espacios en blanco (whitespaces) entre los valores para que no se generen errores.

Estilos .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: var(--off-white);
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
  border: none;
  border-radius: 4px;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  color: var(--black);

Estilos .header--title-container .header--button span:

  display: inline-block;
  width: 13px;
  height: 8px;
  margin-left: 10px;
  background-image: url("../assets/icons/arrdown.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

Position absolute toma a position relative como padre directo y puede reposicionarse en cualquier parte del header.

Al principio de la clase creo que el profe se equivoco, pues si es posible usar top, right, left y bottom con position: relative y lo hace desde su punto original de su posicion, a diferencia de absolute que modifica el flujo de nuestro layout. Solo position: static no nos deja usar las 4 propiedades offset antes mencionadas (top, left, etc).

Esto les servir谩 para centrar el elemento sin tener que saber las dimensiones exactas del elemento:

    left: 50%;
    transform: translateX(-50%);

El transform lo que hace es mover el elemento respecto a su propio centro. En este caso yo indico que quiero moverlo en su eje X, un 50% de su ancho actual en direcci贸n negativa, es decir, a la izquierda 馃憤

Bien!!! Genial!!

Si tienen problema con la imagen como la descarg贸 Diego, les sugiero bajarla como Vector.svg

Yo lo hice con el display inline-flex y me ayudo a no tener que hacer c谩lculos, quedando centrado, solo agregando el tama帽o y el margin.
Es mi aporte pero si alguien nota alg煤n error me encantar铆a que me lo comentara

.header--container-button {
    display:inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
    width: 229px;
    height: 48px;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: var(--off-white);
    color: var(--warm-black);
    text-decoration: none;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 4px;
    
}

Para centrar a la mitad el boton, se mueve desde la izquierda un 50%, pero el boton empieza en ese 50% por lo que tenemos que restar a este 50% la mitad del ancho de nuestro boton, en este caso:
229px/2 =114.5px

Ven铆amos _taaan _bien con las explicaciones y tuvo que aparecer un bot贸n flotante con posici贸n absoluta y ahora hay que hacer c谩lculos para que quede mitad ac谩 y mitad all谩. 馃槮

No me gusta usar tantos valores fijos en px preferiria utilizar rem o % entiendo para los min-width/max-width o algunos otros. Que piensan ustedes sobre el uso de unidades absolutas como px como lo esta haciendo el profesor?

Recuerden quitar la i que est谩 dentro de la etiqueta span, me demor茅 10 minutos en descifrar la raz贸n por la cual mi flecha se ve铆a como una runa vikinga. 馃う鈥嶁檪锔

Alinear un bot贸n con:
position: absolute;
left: calc(50% - 114.5px);
width: 229px;

/* Si solo ponemos left: 50%; pone el lado izquierdo de la caja en el centro, independientemente de cuanto (width) mida nuestra caja. Para que tome el centro de la caja como referencia para posicionar y no el lado izquierdo de la caja hay que hacer el calculo. Tomamos la mitad del Width de la caja, en este caso 114.5px y lo restamos con el 50%. Le estar铆amos diciendo que la caja lo ponga a la mitad de la anchura de la ventana y que mueva 114.5 pixeles m谩s a la izquierda ya que ah铆 es el centro de mi caja. */

Esta es mi solucion a el problema de centrar el boton usando margin

.header--button {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 20px;
    width: 229px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--warm-black);
    border: none;
    border-radius: 5px;
    background-color: var(--off-white) ;
    /* Shadow */
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    transform: translateY(-24px);
}```

Aqu铆 les dejo la documentaci贸n que explica como se usa calc().
https://developer.mozilla.org/es/docs/Web/CSS/calc()

left: calc(50% - 114.5px);

Puede quedar de la siguiente manera para que sea justo la mitad de los 229px que se est谩n usando en el width.

position absolute toma como referencia a su padre siempre y cuando el padre sea position relativa, caso contrario toma al padre mas cercano que tenga relative y si ninguno lo tiene toma como referencia html

el 50% es para que el bot贸n se posicione justo en la mitad de la pantalla, pero no centrado como queremos, sino que ah铆 comienza.
entonces hay que restarle a eso la mitad de lo que mide nuestro bot贸n para correrlo m谩s al centro.

Para la centrada horizontalmente me gusta m谩s utilizar la siguiente propiedad:

left: 50%;
transform: translate(-50%);

De esta forma si el bot贸n cambia de tama帽o por cualquier motivo (cambi贸 el texto, cambi贸 el tama帽o de letra, cambi贸 el tama帽o del icono, etc.), no es necesario tener que volver a manipular el valor de la propiedad de CSS.

Les comparto el c贸digo de la clase:

.header--title-container .header--button {
    position: absolute;
    left: calc(50% - 114.5px);
    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);
}
.header--button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('./assets/icons/down_arrow.svg');
}

Hay un mejor forma de centrar un elemento cuando se utiliza position absolut.

left: 0;
right: 0;
 margin: 0 auto;

馃asi fue como yo lo hice .
use mayormente el display: flex; y trate de mantener el codigo al minimo y lo mas simple que pude.

/*
    1. posicionamiento.
    2. modelo de caja.
    3. tipografia.
    4. estilos visuales (efectos como sombras y bordes).
    5. otros.

*/

:root {
    /*colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --warm-black1: #282623;
    --grey: #bababa;
    --off-white: #FAF8F7;
    --just-white: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    align-items: center;
    background: linear-gradient(207.8deg, var(--warm-black) 16.69%, var(--bitcoin-orange) 100%);
}

header img {
    width: 151px;
    height: 24px;
    align-self: center;
}

.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin-top: 55px;
    height: 218px;
}

.header--title-container h1 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 2.6rem;
    color: var(--just-white);
}

.header--title-container p {
    margin-top: 24px;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

header a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 229px;
    height: 48px;
    position: absolute;
    top: 305px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--off-white);
    color: var(--warm-black1);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 4px;
    border: none;
}

header a span img {
    width: 1.2rem;
    height: 0.741rem;
}

Hola! Cuando coloque el 铆cono de down, se repet铆a o me quedaba posicionado muy alto en relaci贸n al texto, lo solucion{e as铆:
background-position: center;
background-repeat: no-repeat;

Centrar un elemento con calc()

Centrar un elemento horizontalmente

Lo que har谩 el 50% es mover la parte izquierda del bot贸n hacia el centro y luego se le resta la mitad del width de la caja para que se coloque al centro.

.botton{
	position: absolute;
	width: 150px;
	height: 100px;
	left: calc(50% - 150px/2);
}

Centrar un elemento verticalmente

Lo que har谩 el 50% es mover la parte de abajo del bot贸n hacia la l铆nea horizontal (bajar) y luego se le resta la mitad del height de la caja para que se coloque al centro (suba).

.botton{
	position: absolute;
	width: 150px;
	height: 100px;
	top: calc(50% - 100px/2);
}

Si deseas centrar el elemento en funci贸n de su contenedor padre solo debes de cambiar el valor de position de absolute a relative.

Recuerda que HTML trabaja en el cuarto cuadrante

Solo para tener en cuenta:
Mal

left: calc(50%-118px);

Bien

left: calc(50% - 118px);

Siempre se debe dejar un espaciado entre el signo menos

Para los que tambi茅n quieran posicionarlo tipo pixel perfect:

  • Vean el width del contenedor = 320px ( Equivale al 100%),
  • La posici贸n del bot贸n en figma esta justo a 45px de izquierda a derecha.
  • Apliquen regla de 3, si el 100% es 320px, 45px = 14.0625%.
    Esto colocara el bot贸n justo en el punto exacto seg煤n el dise帽o.
.header--title-container .header--button{
    position: absolute;
    left: calc(14.0625%);


Otra manera de posicionar elementos al centro con posicion absolute es:

position: absolute;
// Mueve en horizontal respento al contenedor relativo
left: 50%;	
// Retrocede el elemento respento a la mitad de su propio tama帽o
transform: translateX(-50%);

Les puedo sugeriri usar los iconos de fontawesome con la siguiente cdn, esta debe ir entre las etiquetas <head></head>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

van a esta url
font awesome
y escogen los iconos que quieran usar y copian y pegan el html que simpre es una etiqueta <i> con las respectivas clases del icono.
Ejemplo:

<i class="fas fa-chevron-down"></i>

Centrar es mas facil como :

display: inline-block;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);

Yo utilice 115px en left: calc(50% - 115px);

Me pareci贸 m谩s centrado.

Cuando realice el ejercicio no se ve铆a el icono de la flecha hacia abajo, lo solucione con la siguiente l铆nea de c贸digo:
background-position: center;

Bueno as铆 va el proyecto:

El html:

<header class="cabezera">
      <div class="cabezera__titulo-headear">
        <img src="/assets/img/logo.svg" alt="logo Batatabit" />
      </div>

      <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>

      <p>
        Batatabit te ayuda a navegar entre los diferentes precios y tendencias.
      </p>

      <button class="cabezera--planes">
        Conoce Nuestros Planes

        <img src="./assets/icons/down-arrow.svg" alt="flecha abajo" />
      </button>
    </header>

El css:

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  text-align: center;
  font-family: "DM Sans", sans-serif;
}

/* colores */
/* tama帽o de fuentes */
.cabezera {
  position: relative;
  display: grid;
  place-content: center;
  top: 0;
  height: 50vh;
  min-width: 340px;
  background-image: linear-gradient(to left bottom, #282523, #5a3e27, #8c5828, #c17525, #f7931a);
}
.cabezera .cabezera__titulo-headear {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-block-end: 2.8rem;
}
.cabezera .cabezera__titulo-headear img {
  width: 20rem;
}
.cabezera h1 {
  margin: 0 24px;
  font-size: 2.8rem;
  color: #fff;
}
.cabezera p {
  padding: 1.2rem 2.8rem;
  font-size: 1.6rem;
  color: #ffe8d5;
}
.cabezera .cabezera--planes {
  justify-self: center;
  position: absolute;
  bottom: -2%;
  border: none;
  border-radius: 8px;
  padding: 1.2rem 2rem;
  width: 30rem;
  font-size: small;
  font-weight: bold;
  color: #282523;
  background-color: #ffe8d5;
  box-shadow: -1px 4px 10px -5px;
}/*# sourceMappingURL=main.css.map */

No s茅 si a alguien como a m铆 le estaba pasando algo鈥 por un espacio no me centraba el bot贸n :鈥( ten铆a buen rato tratando de encontrar el error JAJAJA

.header--title-container .header--button {
    position: absolute;
    left: calc(50% - 110px);
    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-radius: 4px;
    border: none;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}

Me sorprendi贸 el uso de left: calc(50% - 114.5px);
s煤per para aprender a centrar

Yo use esta propiedades para posicionarl

left: 50%;
 transform: translate(-50%,0);

Hola, yo lo centre de esta manera

Hola, yo lo centre de esta manera

.header--title-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header--button{
	position: absolute;
  	bottom: -24px;
 }

lo bueno de estos cursos para las personas que estamos empezando en esto; es que ajuro tenemos que aprender, lo hacemos cuando vemos el video, lo hacemos cuando se lee los recursos que trae cada video y luego con los conocimientos que hacen en los aportes que son fabulosos鈥iles de formas de hacer lo mismo 鈥arias formas de centrar un boton鈥 todas funcionan, todas las probe鈥ue bueno es estudiar con personas que tienen experiencia y las comparten鈥racias por sus aportes

Generador de sombras de MDN Web Docs

Lei en MDN que es mejor definir sin borde con border: 0; por temas de optimizacion

Uso de box-shadow

Ejemplo:

box-shadow:  3px  5px 10px red;
  1. (3px)El primer valor determina la posici贸n de la sombra en el eje 鈥渪鈥 de la caja a la que se le quiere aplicar sombra.
  2. (5px) Determina la posici贸n en el eje 鈥測鈥.
  3. (10px) Define el difuminado que va a tener la sombra.
  4. (red) El cuarto determina el color de la sombra.

Tambi茅n puedes usar n煤meros negativos para mover la sombra hacia arriba o hacia la izquierda.

Otro ejemplo con valores diferentes:

box-shadow:  -3px  -5px 20px rgb(53, 12, 235); 

Otra forma de hacerlo ser铆a dividiendo el width del elemento por 2, por ejemplo;

.header--title-container .header--button {
	position: absolute;
	left: calc(50% - (229px / 2));
	top: 270px;
	display: block;
	width: 229px;
	height: 48px;
}

Comparto mi manera de posicionar el b贸ton de manera sim茅trica:

.header--title-container .header--button {
	position: absolute;
	right: 50%;
	bottom: 0;
	transform: translate(50%, 50%)
}

De esta manera, se colocar谩 el bot贸n donde queremos independientemente del tama帽o del contenedor padre o del tama帽o del hijo.

header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 32rem;
    height: 33.4rem;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}
header img{
    width: 15rem;
    height: 2.4rem;
    margin-top: 6rem;
    align-self: center; /*Es por el flex*/
}
.header--title-container{
    width: 90%;
    min-width: 28.8rem;
    max-width: 90rem;
    height: 21.8rem;
    margin-top: 4rem;
    text-align: center;
    align-self: center; /*Es por el flex*/
}
.header--title-container h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header--title-container p{
    margin-top: 2.5rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}
.header--title-container .header--button{
    position: absolute;
    top: calc(100% - 2.4rem);
    left: calc(50% - 11.45rem);
    display: block;
    padding: 1.5rem;
    width: 22.9rem;
    height: 4.8rem;
    background-color: var(--off-white);
    /*Sombra*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: .5rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}
.header--button span{
    display: inline-block;
    width: 1.3rem;
    height: .8rem;
    margin-left: 1rem;
    background-image: url('./assets/icons/down-arrow.svg');
}

Le hice unos cambios al header .

Compa帽eros de platzi, trate de hacer una replica (no exacta, colocando colores que me gustaban) tratando de ver el video o el c贸digo ya hecho lo menos posible鈥

Aun tengo dudas en lo siguiente, mas que todo en las posiciones:

驴por que se usa la position relative para el header y el display flex y el flex-direction:colum?

隆Este fue mi resultado final! Es m谩s dif铆cil de lo que parec铆a a simple vista jajaj. Para verse sencillo se requiere mucho conocimiento Pronto lo modificar茅 con mis propios estilos!

Creo que es m谩s facil hacerlo asi:

header{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.header__btn{
    margin-bottom: -40px;
}

Sin importar cual sea la altura del header el boton siempre esta flotando entre las 2 secciones.

otro aporte al momento de usar calc en caso de querer sentrar el numero excato NOSOTROS lo debemos calcular el cual es sumar, todo lo q queda en el 鈥渆je inline鈥 q seria el margin left y right al igual q el padding y si hubiera borde tambien y alli ese resultado dividirlo a la mitad y alli sale para hacer el calculo de left

cal(50% - xxx px)

Me gust贸 much铆simo esta clase. Aprend铆 bastante con la explicaci贸n del profe Diego. Sin palabras. 馃挌

Como la tecnolog铆a BEM sugiere en lo posible no mezclar en un selector tags html con clases, he realizado la siguiente alternativa:
HTML

<header class="header">
    <img class="header__img" src="./assets/images/logo.svg" alt="Logo de Batatabin" />
    <div class="header__title">
        <h1 class="header__title__h1">La pr贸xima revoluci贸n en el intercambio de criptomonedas</h1>
        <p class="header__title__p">Batatabit te ayuda a navegar entre los diferentes precios y tendencias</p>
        <div class="header__button">
            <a class="header__button__a" href="">Conoce nuestros planes</a>
            <spam class="header__button__icon"></spam>
        </div>
    </div>
</header>

CSS

.header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(207.8deg, var(--warm-black) 16.69%, var(--bitcoin-orange) 100%);
}

.header__img{
    width: 150px;
    margin-top: 60px;
}

.header__title{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
}

.header__title__h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.header__title__p{
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

.header__button{
    position: absolute;
    top: 270px;
    left: calc((100% - 229px)/2);
    width: 229px;
    height: 48px;
    margin-top: 35px;
    padding: 15px;
    background-color: var(--off-white);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(89,73,30,0.16);
    font-size: 1.4rem;
}

.header__button__a{
    font-weight: bold;
    color: var(--black);
    text-decoration: none;
}

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

Espero que a alguien le sea 煤til

Si a alguien no le aparece la flechita al final, agreguen eun background-position:

.header--button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url("./Assets/Icons/arrow_down.svg");
    background-position: center;
}

Para los que no le aparece la flechita, como comento otro compa帽ero lo solucione con:
background-position: center;

Ese bot贸n no esta para nada centrado, y si tienes un container flex, no le veo el caso de centrar de esa manera, cuidado que lo que mal se aprende, no se olvida.

Yo a mi proyecto le agregu茅 un navbar con un men煤.

<h4>Repaso del Header</h4>
  • Implementamos display flex para usar column y posicionar el contenido de adentro como align self
  • Box shadow para utilizar sombras
  • Usar position para poder posicionar de la forma que queramos un elemento
  • Usar gradient para tener un fondo difuminado

Hice unas pocas modificaciones para posicionar el bot贸n de una forma m谩s precisa.

.header--title-container .header--button {
  position: absolute;
  bottom: -24px; // Es m谩s f谩cil tomar distancia desde abajo que desde arriba, lo ubiqu茅 usando la mitad de la altura del bot贸n
  left: 0;
  right: 0;
  margin: auto; // Esta y las dos declaraciones anteriores centran el bot贸n horizontalmente
  padding: 15px;
  width: 229px;
  height: 48px;
  background-color: var(--off-white);
  box-shadow: 0 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);
}

De esta otra forma el boton puede quedar centrado cuando sale de la caja padre:
.header鈥搕itle-container .header鈥揵uttom {
/* top: 270px; /
/
margin-top: 35px; */
bottom: -24px;
}

Al ingresar buttom 鈥0鈥 se posiciona al limite del padre, y si tomo la mitad del alto del tama帽o del boton, se centra por fuera del div padre

Super 馃槂

Algo que me ha servido mucho con la funci贸n de c谩lcculo cuando quiero algo muy exacto y no quiero estar adivinando es lo siguiente:

.class {
	position: absolute;
	left: calc(50% - calc(100px / 2));
	width: 100px;
}

De manera que si mi ancho es de 100px y suponiendo que no quiero estar buscando cuanto es la mitad o simplemente no quiero hacerlo cada vez que cambie el ancho o alto, entonces uso la funci贸n calcular para sacar primero la mitad y luego esa mitad la resto al 50% del ancho de la caja.

Hasta ahora me ha gustado mucho el curso, he visto comentarios de personas que saben m谩s y hacen sugerencias creo que esta perfecto siempre que sean constructivos.
Personalmente estoy empezando la escuela de desarrollo web y CSS hasta ahora me ha parecido complejo por lo amplio que es, con este curso he aprendido muchisimo y claro la idea es seguir practicando.

es incre铆ble ver el resultado final del header 馃槃

Ser铆a muy bueno que en alguna nueva revisi贸n de CSS implementen alguna variable o funci贸n estilo self.width para poder utilizar mejor la funci贸n calc a la hora de centrar el bot贸n.

Para los que no les sirve posicionar el button apliquen esto en su html

<div class=鈥渉eader鈥揵utton鈥><a href="" class=鈥渉eader鈥揵utton-a鈥>Conoce Nuestros Planes<span></span></a></div>

Y Esto va en el css

.header鈥搕itle-conteiner .header鈥揵utton {
position: absolute;
top: calc(100% - 24px);
left: calc(50% - 114.5px);

<h3>No es mucho, pero mi aporte: Estilos en scss</h3>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Batata Bit</title>
  <link href=鈥渉ttps://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap鈥
    rel=鈥渟tylesheet鈥>
  <link rel="stylesheet" href="./assets/styles/styles.css">
</head>
<body>
  <header class="header">
    <img class="header-img" src="./assets/img/logo.svg" alt="Logo de Batatabit" title="Logo de Batatabit">
    <div class="header-title-container">
      <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas</h1>
      <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias</p>
      <a class="header-button" href="#">Conoce Nuestros Planes <span></span></a>
    </div>
  </header>
  <main>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </main>
  <footer></footer>
</body>
</html>
:root {
  /* Colores */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: rgb(231, 245, 255); 
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #fff;
  --shadow-btn: #59491e29;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html{
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}

.header {
  position: relative; // Esto es solo para que el bot贸n flote
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 320px;
  height: 334px;
  text-align: center;
  background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);

  &-img {
    width: 150px;
    height: 24px;
    margin-top: 39px;
    align-self: center;
  }

  &-title-container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 36px;
    text-align: center;
    align-self: center;
    
    h1 {
      color: var(--just-white);
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 2.6rem;
    }

    p {
      color: var(--off-white);
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.8rem;
      margin-top: 32px;
    }
    
    .header-button {
      background: var(--off-white);
      border: none;
      border-radius: 5px;
      color: var(--warm-black);
      display: block;
      font-size: 1.4rem;
      font-weight: bold; 
      padding: 15px;
      text-decoration: none;
      height: 48px;
      width: 229px;
      position: absolute;
      top: calc(100% - (48px/2)); // 48 es el height
      left: calc(50% - (229px/2)); // 229 es el width
      box-shadow: 0 4px 8px var(--shadow-btn);

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

Para posicionar el bot贸n y no realizar los calculos yo hice lo siguiente:

.header__title-container .header__button {
    position: relative;
    display: inline-block;
    top: 20px;
}

Al a帽adir la flecha la tenia torcida y lo solucione con display flex de la siguiente manera

.header--title-container .header--button {
    	.
	.
	.
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  	.
	. 
	.
}

Yo posicion茅 el bot贸n de una manera muy diferente, les dejo mi c贸digo.

.header--title-container .header--button {
    position: relative;
    top: 2.6rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    width: 229px;
    height: 48px;
    color: var(--warm-black);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.4rem;
}

Tambi茅n quer铆a hacer notar que el profesor no sigue siempre los tama帽os que el dise帽o en Figma dicen, un ejemplo en concreto es el border-radious 驴Por qu茅 le pone 5px si el dise帽o dice 4px? Me molesta que escoja de manera un poco antojadiza los tama帽os, si tenemos un dise帽o predeterminado.

vamos progresando! 鉂わ笍

.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: 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--warm-black);
    text-decoration: none;
}
.header__button a {
   margin-left: 16px;
}
.header__button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 14px;
    background-image: url("./assets/icons/mdi_keyboard_arrow_down.svg");
}

En el texto del boton, tuve que agregar flex porque no se veia centrado. Y la imagen la puse de 24x24

.header--title-container .header--button {
    position: absolute;
    top: 270px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
    width: 229px;
    height: 24px;
    border: none;
    border-radius: 4px;
    padding: 12px 16px;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--black);
    left: calc(50% - 130px);
}

.header--button span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    background-image: url('./assets/icons/mdi_keyboard_arrow_down_3.svg');

}

Les comparto el uso de otras propiedades para obtener el mismo resultado en el bot贸n

.header--button{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    transform: translateY(50%);
    padding: 0 16px;
    width: 229px;
    line-height: 4.8rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--warm-black);
    background-color: var(--off-white);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    text-decoration: none;
}```
Ayuda mucho leer algunos comentarios: ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-09-25%20153229-7d4c646d-6aa7-4c9d-86ba-ddc2369da2c4.jpg)
Para mi fue necesario centrar la imagen del 铆cono ya que esta no se ve铆a .header--button span { *display*: inline-block; *width*: 13px; *height*: 8px; *margin-left*: 10px; *background-position*: center center; *background-image*: url('./assets/icons/arrow\_down.svg');}

![](file:///home/diego/Pictures/Screenshots/Screenshot%20.png)

/* position absolute toma como referencia a su padre siempre y cuando el padre este posicionado, caso contrario toma al padre mas cercano y si ninguno lo tiene toma como referencia html */

Otra forma de desbordar el bot贸n y mantenerlo centrado es esta:
El contenedor del bot贸n debe tener position relative.

    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: 10px 20px;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-neutro-claro);
    text-decoration: none;
    border-radius: 4px;
    background-color: var(--color-principal);

de echo no explica como se usa las sombras en box-shadow pero lo invito que busque en youtub hay muy buen contenido explicando cada parte de los valores y como funciona

Para: Florencia Urquiza y a todo aquel que le sea util.

Sabemos cuantos pixeles hay que restar si dividimos entre 2 el ancho para centrarlo horizontalmente y/o el alto para centrarlo verticalmente.

S铆 quieren ver que tan bien alineada esta quedando su pagina, cuanto mide algo. Hay dos extensiones para chrome muy 煤tiles:

-Page Ruler: Es una regla, bastante 煤til para medir cualquier cosa en pixeles.

-PageLiner: Crea l铆neas de gu铆a para alinear elementos, muy 煤til para tener una mejor conciencia espacial y corregir el posicionamiento.

buenas, capaz a ninguno le paso pero con la funci贸n calc pongan separados los numero del signo de resta
as铆
calc (50% - 118px)
no s茅 porque de la siguiente manera no te da bola
calc (50%-118px)

Si introuduces la imagen en el html, de esta manera:

<a href="#" class="header__link">Conoce Nuestros Planes <span class="header__img-link"><img src="assets/icons/down-arrow.svg" alt="flecha desplegable"></span></a>

Luego basta con ponerle un display flex la clase 鈥渉eader__link鈥 y alinearlo, te ahorras unas cuantas lineas de c贸digo 馃槂


.header__link {
    position: absolute;
    bottom: -2.5rem;
    left: calc(50% - 11.4rem);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    background-color: var(--off-light);
    color: var(--dark);
    border-radius: .5rem;
    box-shadow: 0 4px 8px rgb(89 73 30 / .16);
}

:root {
    --bitcoin-orance: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

header{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}

header img {
    width: 150px;
    height:24px;
    margin-top: 60px;
    align-self: center;
}

.header--title-container {
    width: 90%;
    min-width:288px;
    max-width:900pX;
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center;
}

.header--title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.header--title-container p {
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

.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,38,0.16);
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}

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

Con aportes de los comentarios, as铆 fue como centr茅 la etiqueta <a> :

// agregue esto al title-container porque mi texto no se centraba por alg煤n motivo xd
.header__title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__title-container .header__button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
}

Esta es la manera m谩s limpia de central el button:

.header--title-container .header--button {
    position: absolute;
    top: 270px;
    left: 0;
    right: 0;
    margin: auto;
}

Les comparto como lo hice yo:

<code> 
    left: calc(50% - 114.5px);
    bottom: 0;
    transform: translateY(50%);
/* La parte de bottom y transform la pueden reemplazar tambien por: */
   top: calc(100% - 24px); 

Explicaci贸n: Lo que sucede es que al utilizar left: 50%; se va a alinear el elemento (bot贸n) en el 50% del contenedor pero comenzando desde donde inicia el bot贸n, por esto lo que debemos hacer es ver: cuanto mide en total el elemento (en este caso 229px) lo dividimos /2 y nos da 114.5px este valor se lo restamos al calculo para que si el centro del elemento sea el que queda alineado al 50%.
Espero haberme hecho entender, saludos!

Creo que el profe en el curso de html y css nos ense帽贸 que era una mala pr谩ctica llamar las imagenes desde css.

Asi que hice unos cambios y para evitar que la etiqueta img del header alterar谩 la otra etiqueta (especificidad), en vez del span que pone el profe.
Ac谩 dejo mi propuesta:

header .logo {
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

/* en vez de: */

header img{
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

/* y */

.header--button img {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
}

/* en vez de */

.header--button img {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
}

y en el HTML:

    <header>
        <img class="logo" src="./assets/imgs/Logo.svg" alt="">
        <div class="header--title-container">
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="/" class="header--button">Conoce Nuestros Planes <img src="./assets/icons/arrow-down.svg" alt=""></a>
        </div>
    </header>

en vez de:

    <header>
        <img src="./assets/imgs/Logo.svg" alt="">
        <div class="header--title-container">
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="/" class="header--button">Conoce Nuestros Planes <span></span></a>
        </div>
    </header>

Para tener todo los llamados desde HTML. Pues en mi humilde opini贸n xD

馃槉馃槉

Hmmmm, testuvo muy buena la clase, pero creo que algo le quedo mal al profe y me gustaria saber si si es asi, cuando le da los estilos al .header鈥揵utton la forma en la que lo selecciona en el css, ya que solo hay un header y pues para eso se le llamo a esa clase .header鈥揵utton entonces no era necesario seleccionarlo llamandolo .header鈥搕itle-container .header鈥揵utton {}, si estoy en lo correcto?

si les aparece una linea abajo del texto de la etiqueta a puede removerla con la propiedad -> text-decoration: none;

a mi me queda el icono del bot贸n abajo, no a la dereca

驴Por qu茅 raz贸n se coloc贸 el bot贸n dentro de la clase .header__title-container?
Coloc谩ndolo fuera de esta clase

<div class="header__title-container">
				<h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas</h1>
				<p>
					Batatabit te ayudara a navegar entre los diferentes precios y
					tendencias.
				</p>
			</div>
			<a href="#" class="header__button"
				>Conoce Nuestros Planes <span class="header__button-icon"></span
			></a>

y habi茅ndole colocado a la etiqueta header align-item en lugar de align-self a cada contenedor hijo no es necesario hacer c谩lculos para centrar

header .header__button {
	position: absolute;
	top: 270px;
	width: 229px;
	height: 48px;
	padding: 15px;
	}

Varie el ancho de la pantalla y jam谩s hubo error.
Si es mala pr谩ctica o algo hac茅dmelo saber

Aqu铆 otra forma de hacerlo, utilizando una variable para el ancho del button. Creo que es m谩s f谩cil de esta manera.

.header--title-container .header--button{
    position: absolute;
    left: calc((100% - var(--button-widh))/2);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: var(--button-widh);

El calc es 50% - la mitad del ancho del elemento a centrar

馃摙馃摙 AVISO IMPORTANTE 鉂椻潡

Para los que se preguntan c贸mo hallar la cantidad exacta que debemos restar en :

top: cal (100% - X)
  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6