0

El problema radica en el efecto de salida de los botones:

.padre {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  background:#73AD20;
  border-radius:50%;
  border: 1px solid #73AD21;
  z-index:3;
  text-align: center;
  cursor:pointer;
}
.padre:hover .hijo1{
top:-60px;
display:block;
}
.padre:hover .hijo2{
top:-120px;
display:block;
}
.padre:hover .hijo3{
top:-180px;
display:block;
}
.hijo1{
position: absolute;
top:0;
background:red;
  border-radius:50%;
  border: 1px solid red;
  width: 45px;
  height: 45px;
  display:none;
  -webkit-transition: all 1s;
}
.hijo2{
position: absolute;
top:0;
background:blue;
  border-radius:50%;
  border: 1px solid blue;
  width: 45px;
  height: 45px;
  display:none;
  -webkit-transition: all 2s;
}
.hijo3{
  position: absolute;
  top:0;
  background:orange;
  border-radius:50%;
  border: 1px solid orange;
  width: 45px;
  height: 45px;
  display:none;
  -webkit-transition: all 3s;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Posicion fixed;</h2>

<p>Los botones deben de salir con un  efecto de uno por uno:</p>

<div class="padre">
+
<a class="hijo1">
2
</a>
<a class="hijo2">
3
</a>
<a class="hijo3">
4
</a>
</div>


</body>
</html>

Los botones deben de salir 1x1 ademas de poder quedarse ahi para poderlos clickear.

Gracias por su tiempo, quizas sea facil pero es que apenas estoy incursionando en esto de css.

2
  • Puede que lo estés enfocando mal, ¿Tal vez usando un dropdownmenu te resultaría mas sencillo? Commented el 3 may. 2019 a las 9:40
  • Y como hago un dropdownmenu?
    – Shassain
    Commented el 3 may. 2019 a las 13:41

1 respuesta 1

1

lo consegui:

  .cajaf{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    z-index: 100000;
  }
  .cajaf:hover{
    height: 180px;
  }
  .cajaf:hover .caja1{
    visibility: visible;
    bottom: 60px;
  }
  .cajaf:hover .caja2{
    visibility: visible;
    bottom: 120px;
  }
  .caja2:hover:before{
    visibility: visible;
    color:#000;
  }
  .caja1:hover:before{
    visibility: visible; 
    color:#000;
  }
  .btn_roundf{
    position: absolute;
    bottom:0 ;
    right: 0;
    border:1px solid #330000;
    background: #330000;
    color:#ffff00;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    z-index: 90090; 
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    
  }
  .caja1::before{
    content: "Imprimir Comprobante";
    background: #ffd600;
    border:1px solid #ffd600;
    position: absolute;
    left: -140px; 
    padding: .5em;
    visibility: hidden;
  }
  .caja2::before{
    content: "Imprimir Contrato";
    background: #283593;
    border:1px solid #283593;
    position: absolute;
    left: -110px; 
    padding: .5em;
    visibility: hidden;
  }
  .caja1{
    position: absolute;
    bottom: 0;
    right: 0;
    border:1px solid #ffd600;
    background: #ffd600;
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    z-index: 90080; 
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    -webkit-transition: all .5s;
    visibility: hidden;
  }
  .caja2{
    position: absolute;
    bottom: 0;
    right: 0;
    border:1px solid #283593;
    background: #283593;
    color:#fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    z-index: 9070; 
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    visibility: hidden;
    -webkit-transition: all 1s;
  }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><div class="cajaf">
  <a href="#" class="btn_roundf" title="Imprimir" alt="impirmir"><i class="fa fa-print"></i></a>
  <a class="caja1" href="#" alt="contrato" title="Contrato"><i class="fa fa-flag"></i></a>
  <a class="caja2" href="#" alt="comprobante" title="Comprobante"><i class="fa fa-print"></i></a>
</div>

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.