Botão Html e css Personalizado

Botão Html e css Personalizado

Neste artigo veremos como criar um Botão com Html e Css.

Para isso precisamos do HTML, CSS.

Nesta seção, projetaremos uma estrutura simples na tag <a> inserimos uma class chamada “btn” para estilizar com css. 

Vamos Adicionar o HTML

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

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso botão customizado.

.btn{

    display: inline-block;
    padding: 0.5em 1.5em;
    text-align: center;
    text-decoration: none;
    box-shadow: -5px 6px #40BFC4;
    border: 3px solid #59D7DC;
    color: #59D7DC;
    font-weight: 400;
    font-size: 1em;
    transition: all ease-in 0.2s;
    border-radius: 50px;
}

.btn:hover,
.btn:focus{

    background: #53BFC4;
    color: #FFF;
    border-color: #59D7DC;
    box-shadow: none;

}

Combinando as duas seções acima Html + Css  temos o seguinte Resultado baixo !

Veja o Resultado !

Baixar Código Veja Funcionando