Buttons
Botão padrão
- Preview
- HTML
- CSS
<button class="button" type="button">
Button
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", como no exemplo abaixo:
<button class="button" type="button" disabled>
Button
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 91px;
height: 44px;
padding: 12px 20px;
border-radius: 4px;
background-color: #01141E;
color: #FFFFFF;
font-size: 16px;
font-weight: 500;
border: none;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
background-color: #48545d;
}
.button:active{
background-color: #01141E;
}
.button:disabled {
background-color: #E6E6E6;
color: #8E8E8E;
cursor: no-drop;
}
Botão padrão com seta para esquerda
- Preview
- HTML
- CSS
<button class="button" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
Button
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
Button
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 119px;
height: 44px;
padding: 12px 20px;
border-radius: 4px;
background-color: #01141E;
color: #FFFFFF;
font-size: 16px;
font-weight: 500;
border: none;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
background-color: #48545d;
}
.button:active{
background-color: #01141E;
}
.button:disabled {
background-color: #E6E6E6;
color: #8E8E8E;
cursor: no-drop;
}
.button svg {
margin-right: 12px;
}
.button:disabled svg path {
fill: #8E8E8E;
}
Botão padrão com seta para direita
- Preview
- HTML
- CSS
<button class="button" type="button">
Button
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.7813 7.33336L7.20534 3.75736L8.14801 2.8147L13.3333 8.00003L8.14801 13.1854L7.20534 12.2427L10.7813 8.6667H2.66667V7.33336H10.7813Z" fill="#FFF" />
</svg>
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button">
Button
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.7813 7.33336L7.20534 3.75736L8.14801 2.8147L13.3333 8.00003L8.14801 13.1854L7.20534 12.2427L10.7813 8.6667H2.66667V7.33336H10.7813Z" fill="#FFF" />
</svg>
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 119px;
height: 44px;
padding: 12px 20px;
border-radius: 4px;
background-color: #01141E;
color: #FFFFFF;
font-size: 16px;
font-weight: 500;
border: none;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
background-color: #48545d;
}
.button:active{
background-color: #01141E;
}
.button:disabled {
background-color: #E6E6E6;
color: #8E8E8E;
cursor: no-drop;
}
.button svg {
margin-left: 12px;
}
.button:disabled svg path {
fill: #8E8E8E;
}
Botão ghost
- Preview
- HTML
- CSS
<button class="button" type="button">
Button
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", como no exemplo abaixo:
<button class="button" type="button" disabled>
Button
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 91px;
height: 44px;
padding: 12px 20px;
border: 1px solid #E6E6E6;
border-radius: 4px;
background-color: transparent;
color: #000000;
font-size: 16px;
font-weight: 500;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
color: #000000;
background-color: #f0f0f0;
}
.button:active {
background-color: #EBEBEB;
}
.button:disabled {
background-color: #FFFFFF;
color: #8E8E8E;
cursor: no-drop;
}
Botão ghost com seta para esquerda
- Preview
- HTML
- CSS
<button class="button" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
Button
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
Button
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 119px;
height: 44px;
padding: 12px 20px;
border: 1px solid #E6E6E6;
border-radius: 4px;
background-color: transparent;
color: #000000;
font-size: 16px;
font-weight: 500;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
color: #000000;
background-color: #f0f0f0;
}
.button:active {
background-color: #EBEBEB;
}
.button:disabled {
background-color: #FFFFFF;
color: #8E8E8E;
cursor: no-drop;
}
.button svg {
margin-right: 12px;
}
.button svg path{
fill: #000000;
}
.button:disabled svg path {
fill: #8E8E8E;
}
Botão ghost com seta para direita
- Preview
- HTML
- CSS
<button class="button" type="button">
Button
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.7813 7.33336L7.20534 3.75736L8.14801 2.8147L13.3333 8.00003L8.14801 13.1854L7.20534 12.2427L10.7813 8.6667H2.66667V7.33336H10.7813Z" fill="#FFF" />
</svg>
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button">
Button
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.7813 7.33336L7.20534 3.75736L8.14801 2.8147L13.3333 8.00003L8.14801 13.1854L7.20534 12.2427L10.7813 8.6667H2.66667V7.33336H10.7813Z" fill="#FFF" />
</svg>
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 119px;
height: 44px;
padding: 12px 20px;
border: 1px solid #E6E6E6;
border-radius: 4px;
background-color: transparent;
color: #000000;
font-size: 16px;
font-weight: 500;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
color: #000000;
background-color: #f0f0f0;
}
.button:active {
background-color: #EBEBEB;
}
.button:disabled {
background-color: #FFFFFF;
color: #8E8E8E;
cursor: no-drop;
}
.button svg {
margin-left: 12px;
}
.button svg path{
fill: #000000;
}
.button:disabled svg path {
fill: #8E8E8E;
}
Botão link
- Preview
- HTML
- CSS
<button class="button" type="button">
Button
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", como no exemplo abaixo:
<button class="button" type="button" disabled>
Button
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: 24px;
background-color: transparent;
color: #01141E;
font-size: 16px;
font-weight: 500;
transition: all linear 150ms;
cursor: pointer;
border-bottom: 1px solid transparent;
border-radius: 0px;
padding: 0;
}
.button:hover {
color: #01141E;
background-color: transparent;
border-bottom: 1px solid #01141E;
border-radius: 0px;
}
.button:active {
color: #434343;
border-bottom: 1px solid #434343;
}
.button:disabled {
background-color: transparent!important;
color: #A7A7A7;
border-bottom: none;
cursor: no-drop;
}
Botão link com seta para esquerda
- Preview
- HTML
- CSS
<button class="button" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
Button
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
Button
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: 24px;
background-color: transparent;
color: #01141E;
font-size: 16px;
font-weight: 500;
transition: all linear 150ms;
cursor: pointer;
border-bottom: 1px solid transparent;
border-radius: 0px;
padding: 0;
}
.button:hover {
color: #01141E;
background-color: transparent;
border-bottom: 1px solid #01141E;
border-radius: 0px;
}
.button:active {
color: #434343;
border-bottom: 1px solid #434343;
}
.button:disabled {
background-color: transparent!important;
color: #A7A7A7;
border-bottom: none;
cursor: no-drop;
}
.button svg {
margin-right: 12px;
}
.button svg path {
fill: #01141E;
}
.button:disabled svg path {
fill: #A7A7A7;
}
.button:active svg path {
fill: #434343;
}
Botão link com seta para direita
- Preview
- HTML
- CSS
<button class="button" type="button">
Button
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.7813 7.33336L7.20534 3.75736L8.14801 2.8147L13.3333 8.00003L8.14801 13.1854L7.20534 12.2427L10.7813 8.6667H2.66667V7.33336H10.7813Z" fill="#FFF" />
</svg>
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button">
Button
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.7813 7.33336L7.20534 3.75736L8.14801 2.8147L13.3333 8.00003L8.14801 13.1854L7.20534 12.2427L10.7813 8.6667H2.66667V7.33336H10.7813Z" fill="#FFF" />
</svg>
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: 24px;
background-color: transparent;
color: #01141E;
font-size: 16px;
font-weight: 500;
transition: all linear 150ms;
cursor: pointer;
border-bottom: 1px solid transparent;
border-radius: 0px;
padding: 0;
}
.button:hover {
color: #01141E;
background-color: transparent;
border-bottom: 1px solid #01141E;
border-radius: 0px;
}
.button:active {
color: #434343;
border-bottom: 1px solid #434343;
}
.button:disabled {
background-color: transparent!important;
color: #A7A7A7;
border-bottom: none;
cursor: no-drop;
}
.button svg {
margin-left: 12px;
}
.button svg path {
fill: #01141E;
}
.button:disabled svg path {
fill: #A7A7A7;
}
.button:active svg path {
fill: #434343;
}
Botão colorido
- Preview
- HTML
- CSS
<button class="button" type="button">
Button
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", como no exemplo abaixo:
<button class="button" type="button" disabled>
Button
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 91px;
height: 44px;
padding: 12px 20px;
border-radius: 4px;
background-color: #D4F1DF;
color: #28B95E;
font-size: 16px;
font-weight: 500;
border: none;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
color: #28B95E;
background-color: #b8e8ca;
}
.button:active {
color: #ffffff;
background-color: #68CE8F;
}
.button:disabled {
background-color: #E6E6E6;
color: #8E8E8E;
cursor: no-drop;
}
Botão colorido com seta para esquerda
- Preview
- HTML
- CSS
<button class="button" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
Button
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
Button
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 119px;
height: 44px;
padding: 12px 20px;
border-radius: 4px;
background-color: #D4F1DF;
color: #28B95E;
font-size: 16px;
font-weight: 500;
border: none;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
color: #28B95E;
background-color: #b8e8ca;
}
.button:active {
color: #ffffff;
background-color: #68CE8F;
}
.button:active svg path{
fill: #fff;
}
.button:disabled {
background-color: #E6E6E6;
color: #8E8E8E;
cursor: no-drop;
}
.button svg {
margin-right: 12px;
}
.button svg path{
fill: #28B95E;
transition: all linear 150ms;
}
.button:disabled svg path {
fill: #8E8E8E;
}
Botão colorido com seta para direita
- Preview
- HTML
- CSS
<button class="button" type="button">
Button
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.7813 7.33336L7.20534 3.75736L8.14801 2.8147L13.3333 8.00003L8.14801 13.1854L7.20534 12.2427L10.7813 8.6667H2.66667V7.33336H10.7813Z" fill="#FFF" />
</svg>
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button">
Button
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.7813 7.33336L7.20534 3.75736L8.14801 2.8147L13.3333 8.00003L8.14801 13.1854L7.20534 12.2427L10.7813 8.6667H2.66667V7.33336H10.7813Z" fill="#FFF" />
</svg>
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 119px;
height: 44px;
padding: 12px 20px;
border-radius: 4px;
background-color: #D4F1DF;
color: #28B95E;
font-size: 16px;
font-weight: 500;
border: none;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
color: #28B95E;
background-color: #b8e8ca;
}
.button:active {
color: #ffffff;
background-color: #68CE8F;
}
.button:active svg path{
fill: #fff;
}
.button:disabled {
background-color: #E6E6E6;
color: #8E8E8E;
cursor: no-drop;
}
.button svg {
margin-left: 12px;
}
.button svg path{
fill: #28B95E;
transition: all linear 150ms;
}
.button:disabled svg path {
fill: #8E8E8E;
}
Botão padrão com ícone
- Preview
- HTML
- CSS
<button class="button" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 12px;
border-radius: 4px;
background-color: #01141E;
border: none;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
background-color: #48545d;
}
.button:active {
background-color: #01141E;
}
.button:disabled {
background-color: #E6E6E6;
color: #8E8E8E;
cursor: no-drop;
}
.button:disabled svg path {
fill: #8E8E8E;
}
Botão ghost com ícone
- Preview
- HTML
- CSS
<button class="button" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
</button>
<!-- Para desabilitar o botão aplique o atributo "disabled" na tag "button", veja no exemplo abaixo:
<button class="button" type="button" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.21867 7.33336H13.3333V8.6667H5.21867L8.79467 12.2427L7.852 13.1854L2.66667 8.00003L7.852 2.8147L8.79467 3.75736L5.21867 7.33336Z" fill="#FFFFFF" />
</svg>
</button>
-->
.button {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 12px;
border: 1px solid #E6E6E6;
border-radius: 4px;
background-color: transparent;
transition: all linear 150ms;
cursor: pointer;
}
.button:hover {
background-color: #f0f0f0;
}
.button:active {
background-color: #EBEBEB;
}
.button svg path {
fill: #000000;
}
.button:disabled {
background-color: #FFFFFF;
color: #8E8E8E;
cursor: no-drop;
}
.button:disabled svg path {
fill: #A7A7A7;
}