0

Necesito desplegar los elementos del siguiente .botton__container pero de manera Horizontal:

.button__container {
  position: fixed;
  bottom: 30px;
  right: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

.button-radio {
  width: 70px;
  height: 70px;
  cursor: pointer;
  border-radius: 50%;
  margin: 5px 0;
  -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.button-radio--red {
  background: #ff1f1f;
}

.button-radio--blue {
  background: #03a1fc;
}

.button-radio--yellow {
  background: #ffd21f;
}

.button-radio--hidden {
  width: 10px;
  height: 10px;
  opacity: 0;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.button__container:hover > .button-radio--hidden {
  width: 50px;
  height: 50px;
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="test.css">
  <title>Document</title>
</head>
<body>
  <div class="button__container">
    <div class="button-radio button-radio--hidden button-radio--yellow">A</div>
    <div class="button-radio button-radio--hidden button-radio--blue">B</div>
    <div class="button-radio button-radio--main button-radio--red">C</div>
  </div>
</body>
</html>

Gracias de antenamo a cualquier ayuda o sugerencia.

4
  • ¿Y cuál es el problema puntual?
    – user128299
    el 7 ene. 2021 a las 16:35
  • Que se desplegan de manera vertical, pero yo los necesito de manera horizontal (hacia la derecha si es posible)
    – Candelo
    el 7 ene. 2021 a las 16:36
  • Entonces los 3 círculos al fondo verticalmente y a la derecha de forma horizontal ¿cierto?
    – user128299
    el 7 ene. 2021 a las 16:39
  • Sí, exactamente @BetaM
    – Candelo
    el 7 ene. 2021 a las 16:40

1 respuesta 1

1

Necesitas darle el estilo a flexbox para que se horizontal. En tu caso se hace editando las propiedades de css:

  -webkit-box-orient: horizontal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;

Para lo que es flexbox siempre tengo este tutorial (en inglés) a mano, muy útil, conciso y fácil de entender.

.button__container {
  position: fixed;
  bottom: 30px;
  right: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

.button-radio {
  width: 70px;
  height: 70px;
  cursor: pointer;
  border-radius: 50%;
  margin: 5px;
  -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.button-radio--red {
  background: #ff1f1f;
}

.button-radio--blue {
  background: #03a1fc;
}

.button-radio--yellow {
  background: #ffd21f;
}

.button-radio--hidden {
  width: 10px;
  height: 10px;
  opacity: 0;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.button__container:hover>.button-radio--hidden {
  width: 50px;
  height: 50px;
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="test.css">
  <title>Document</title>
</head>

<body>
  <div class="button__container">
    <div class="button-radio button-radio--main button-radio--yellow">A</div>
    <div class="button-radio button-radio--hidden button-radio--blue">B</div>
    <div class="button-radio button-radio--hidden button-radio--red">C</div>
  </div>
</body>

</html>

Update:

Si quieres que salgan para la derecha entonces asigna como elemento padre la A por medio de la clase.

11
  • Gracias Fran. Perdona, ¿cómo los puedo posicionar a la derecha?
    – Candelo
    el 7 ene. 2021 a las 16:41
  • 1
    Pero ya están a la derecha.
    – FranAcuna
    el 7 ene. 2021 a las 16:41
  • No no, pero yo hablo de la posición en que salen.. Es decir, el Grande se posiciona a la izquierda, y que los de adentro salgan hacia la derecha
    – Candelo
    el 7 ene. 2021 a las 16:42
  • 1
    La manera más sencilla sería ponerles un margen a los elementos, también existen opciones de espaciado en flexbox que son sumamente útiles. Te actualicé la respuesta para conservar el espaciado original.
    – FranAcuna
    el 7 ene. 2021 a las 16:49
  • 1
    Le agregué el margin, de hecho originalmente ya existía un margin pero era solo vertical: margin: 5px 0; , lo que hice fue hacerlo general margin: 5px;
    – FranAcuna
    el 7 ene. 2021 a las 16:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.