CODEWITHSUNDEEP
htmlcss
julian
julian

Reputation: 434

Problems with css transition between span

I am trying to change a text in a button HERE. The transition in the color works fine, but the transition on the span positions do not work.

Here is my code:

<style>
#btnIniciarFacturacion{
    width: 200px;
    height: 30px;
}

#btnIniciarFacturacion {
   position: relative;
    -webkit-transition:  2s; 
    transition: 2s; 
    overflow: hidden;

}
.btnIniciarFacturacion-content {
    position: absolute;
    left:0;
    top:0;
    font-size: 20px;
    font-weight: bolder;
}

#btnIniciarFacturacion:hover{
    background-color: orange;
}
#btnIniciarFacturacion .btnIniciarFacturacion-top{
    top:0;
}
#btnIniciarFacturacion:hover .btnIniciarFacturacion-top{
    top:-50px;
}
#btnIniciarFacturacion .btnIniciarFacturacion-bottom {
    top:50px;
}
#btnIniciarFacturacion:hover .btnIniciarFacturacion-bottom {
    top:0px;
}
</style>
<button class="" id="btnIniciarFacturacion">
  <span class="btnIniciarFacturacion-top btnIniciarFacturacion-content" id="spanTotalFacturado"> TOTAL !@#</span>
  <span class="btnIniciarFacturacion-bottom btnIniciarFacturacion-content">Iniciar Facturación</span>
 </button>

Upvotes: 0

Views: 2215

Answers (1)

Don Bottstein
Don Bottstein

Reputation: 1660

You're missing the transition style on the span elements:

.btnIniciarFacturacion-content {
    position: absolute;
    left:0;
    top:0;
    font-size: 20px;
    font-weight: bolder;
    transition: 2s; 
}

Upvotes: 3

Related Questions