Produto
PRODUTO
Botões
Botões expressam uma ação a ser executada a partir do clique ou toque em sua área. O texto de um botão apresenta-se usualmente no infinitivo, sempre indicando de maneira clara o resultado decorrente de sua interação.
Estados de interação
Normal
Hover
Pressed
Disabled
Loader
With icon
Hierarquia
A variação de tamanho de um botão busca indicar tanto o seu peso hierárquico em uma página quanto tornar versátil a sua aplicação em diferentes contextos de composição de layout.
O botão com preenchimento de cor é dado como o estilo prioritário de aplicação do componente, enquanto sua variação em outline coloca-se à funções de diferenciar visualmente uma ação justaposta apresentada no mesmo nível hierárquico.
Large
Medium
Small
Large
Medium
Small
Código
HTML 
Exibir código
Copiar código
Exibir código
<button class="btn">
<span class="text">Label</span>
</button>
<button class="btn large">
<span class="text">Label</span>
</button>
<button class="btn outline">
<span class="text">Label</span>
</button>
SASS Exibir código
Copiar código
Exibir código
.btn{
border-radius: 30px;
background-color: #3153f5;
color: #ffffff;
text-transform: uppercase;
font-family: Lato;
font-size: 0.875em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.43;
letter-spacing: normal;
text-align: center;
outline: none;
border: 1px solid #3153f5;
padding: 14px 0;
min-width: 204px;
max-width: 100%;
cursor: pointer;
position: relative;
transition: .4s;
overflow: hidden;
&:not(.outline):after{
content:"";
display:block;
background-image: url('data:image/svg+xml;utf8,');
background-position: top center;
width: 150%;
height: 103px;
position:absolute;
left:0;
bottom: -106px;
transition:.8s;
opacity: 0.1;
pointer-events:none;
}
&:hover,
&.hovered{
&:after {
transform: translateY(-100%);
}
}
&:not(.outline):active,
&:not(.outline).pressed{
border: 1px solid #fff;
background-color: #0143e0;
&:not(.outline):after{
opacity: 0;
}
}
&.disabled{
pointer-events: none;
background-color: #ebebeb;
border-color: #ebebeb;
span{
color: #9b9b9b!important;
}
}
.btn-icon {
position: absolute;
left: 18px;
width: 27px;
height: 27px;
top: 10px;
}
span.text {
position:relative;
z-index:9;
color: #fff;
-webkit-transition:all .6s ease;
-moz-transition:all .6s ease;
-ms-transition:all .6s ease;
-o-transition:all .6s ease;
transition:all .6s ease;
pointer-events: none;
}
&.loader{
height: 50px;
.loading{
position: relative;
top: -2px;
width: 24px;
height: 24px;
-webkit-animation-name: spin;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 2000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
&.large{
min-width: 250px;
font-size: 1em;
padding: 18px 0;
line-height: 1.5;
}
&.medium{
font-size: 0.875em;
padding: 14px 0;
line-height: 1.43;
}
&.small{
min-width: 194px;
font-size: 0.75em;
padding: 11px 0;
line-height: 1.38;
}
&.outline{
background-color: #fff;
color: #3153f5;
border-color: #3153f5;
transition: background-position-y 1s;
background-image: url('data:image/svg+xml;utf8,');
background-size: 150%;
background-position-x: -30px;
background-position-y: 106px;
background-repeat: no-repeat;
&:after {
content:"";
display:block;
background-image: url('data:image/svg+xml;utf8,');
background-position: top center;
width: 150%;
height: 103px;
position:absolute;
left:0;
bottom: -106px;
transition:.8s;
pointer-events:none;
}
span.text{
color: #3153f5;
}
&:hover,
&:active{
background-position-y: -60px;
span.text{
color: #fff;
}
}
&:active,
&.pressed{
border: 1px solid #fff;
background-color: #0143e0!important;
span.text{
color: #fff;
}
&:after {
background-image: url('data:image/svg+xml;utf8,');
}
}
}
}
@-ms-keyframes spin {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@-moz-keyframes spin {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}