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.