Botões

Botão Genérico
Código
Ocultar Código
  • HTML
  • CSS

<button class="button1" type="button">Botão</button><button class="button2" type="button">Botão 2</button>

button{
    padding: 0px 57px; 
    border-radius: 30px;
    height: 43px;
    font-size: 14px!important;
    font-family: 'latoregular'!important;    
    text-transform: uppercase;
}
.button1{
    color: #2980b9;
    background: #fff;
    border: 1px solid #2980b9;
}
.button1:hover{
    color: #fff;
    background: #2980b9;
    border: 1px solid #2980b9;
}
.button2{
    color: #fff;
    background: #2980b9;
    border: 1px solid #fff;
}
.button2:hover{
    opacity: 0.8;
}

Botão com ícone
Código
Ocultar Código
  • HTML
  • CSS

<button class="button1 button-icon" type="button"><i class="icon-cogs">&nbsp;</i>Botão</button><button class="button2 button-icon"  type="button"><i class="icon-cogs">&nbsp;</i>Botão 2</button>

button{
    padding: 0px 57px; 
    border-radius: 30px;
    height: 43px;
    font-size: 14px!important;
    font-family: 'latoregular'!important;    
    text-transform: uppercase;
}
.button1{
    color: #2980b9;
    background: #fff;
    border: 1px solid #2980b9;
}
.button1:hover{
    color: #fff;
    background: #2980b9;
    border: 1px solid #2980b9;
}
.button2{
    color: #fff;
    background: #2980b9;
    border: 1px solid #fff;
}
.button2:hover{
    opacity: 0.8;
}
button.button-icon i{    
    width: auto !important;
    height: auto !important;
    font-size: 0;
    line-height: normal !important;
    vertical-align: middle !important;
    margin-right: 10px;
}
button.button-icon i:before{
    font-size: 24px;
    line-height: 24px;
}