Botões
- Home >
- Componentes >
- Botões
Botões
Botão Genérico
- 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
- HTML
- CSS
<button class="button1 button-icon" type="button"><i class="icon-cogs"> </i>Botão</button><button class="button2 button-icon" type="button"><i class="icon-cogs"> </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;
}
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.