comportamiento botones js

[lamenenchu]

Iniciado por ZedGe1505

Una opción parecida a la que tenias

https://jsfiddle.net/8hj6stxr/3/

Al final lo conseguí con tu ayuda... Esto es lo que necesitaba

Código:

 <div class="pos1">
    <button type="button" class="btn-curso" id="primero" onclick="visualiza_segundo()">Parcial</button>
      </div>
  <div class="pos2">
         <button type="button" class="btn-finish"  id="segundo" onclick="visualiza_tercero()" style="visibility:hidden; display:none;">Total</button>
  </div>
  <div class="pos3">
      <button type="button" class="btn-wait" id="tercero" onclick="visualiza_primero()" style="visibility:hidden; display: none;"> No
        </div>

Código:

function visualiza_primero() {                  document.getElementById('primero').style.visibility='visible';
    document.getElementById('primero').style.display='inline';
        document.getElementById('tercero').style.visibility='hidden'; document.getElementById('segundo').style.visibility='hidden';
         document.getElementById('segundo').style.display='none';
      };
function visualiza_segundo() {
       document.getElementById('primero').style.visibility='hidden';  document.getElementById('segundo').style.visibility='visible';
         document.getElementById('segundo').style.display='inline';
         document.getElementById('tercero').style.visibility='hidden';
         document.getElementById('tercero').style.display='none';
      };
function visualiza_tercero() {
  document.getElementById('segundo').style.visibility='hidden'; 
  document.getElementById('tercero').style.visibility='visible';
         document.getElementById('tercero').style.display='inline';
         document.getElementById('primero').style.visibility='hidden';
         document.getElementById('primero').style.display='none';
};

Código:

.btn-finish {
    background-color: #018579; 
    color: white;
    padding: .5em;
    border-radius: 5px;
    font-size: .8em;
   border:0;
  cursor: pointer;
  width: 70px;
}
.btn-finish a{
    color:white;
    text-decoration: none;
}
.btn-finish a:hover{
    color:#b7e8d7;
    text-decoration: none;
}
.btn-curso {
    background-color: #f7b36f;
    color: white;
    padding: .5em;
    border-radius: 5px;
    font-size: .8em;
     border:0;
  cursor: pointer;
   width: 70px;
}
.btn-curso a{
    color:white;
    text-decoration: none;
  
}
.btn-curso a:hover{
    color:#f2eac6;
    text-decoration: none;
}
.btn-wait{
    background-color: #d54b47;
    color: white;
    padding: .5em;
    border-radius: 5px;
    font-size: .8em;
  border:0;
  cursor: pointer;
  
}
.btn-wait a{
    color: white;
    text-decoration: none;
}
.btn-wait a:hover{
    color:#fcaaa9;
    text-decoration: none;
}
.pos1, .pos2, .pos3{
  position: absolute;
  top: 10px;
  left: 10px;
}

Ahora me falta averiguar pq el botón de no, al darle el mismo width que el resta, deja de funcionarme el comporta