Botão Animado com Css3

Neste Artigo veja como você pode criar um Botão Animado com Css3

Vamos Adicionar o Html

<div class="boxBtn">
        
    <a class="btn" href="#"> <i class="icon icon-code"></i> Html 5</a>

</div>

<div class="boxBtn">
        
    <a class="btn" href="#"> <i class="icon icon-share"></i> Css3</a>

</div>

<div class="boxBtn">
        
    <a class="btn" href="#"> <i class="icon icon-arrow-circle-right"></i> Jquery</a>

</div>

<div class="boxBtn">
        
    <a class="btn" href="#">Saiba mais...</a>

</div>

Agora vamos Adicionar o Css:

.boxBtn {
    
    float:left ;
    text-align: center;
    margin:0 10px;
        
}

.boxBtn .btn {

    display: inline-block;
    width: 150px;
    height: 45px;
    line-height:45px;
    text-decoration:none;
    position: relative;
    overflow: hidden;
    border: 2px solid #26d4db;
    background-color:#26d4db;
    color:#ffffff;
    font-family: 'open_sansregular';
    border-radius:50px;
    transition: color .5s;
    z-index:1;

}

.boxBtn .btn:before {
    
    content: "";
    position: absolute;
    z-index: -1;
    background-color: #464646;
    height: 150px;
    width: 200px;
    border-radius: 100%;
}

.boxBtn .btn:hover {

    color: #26d4db;

}

.boxBtn .btn:nth-child(1):before {
        top: 0;
        left: -200%;
        transition: all .7s;
}

.boxBtn .btn:nth-child(1):hover:before {
        top: -30px;
        left: -30px;
}

Veja o código funcioando abaixo:

Baixar Código Veja Funcionando