docs/_sass/_buttons.scss
// ***********************
// Buttons
// ***********************
.button.active {
box-shadow: inset 0 .2rem .5rem 0 rgba(0,0,0,0.16), inset 0 .2rem .1rem 0 rgba(0,0,0,0.12);
background-color: rgba(0,0,0,0.001);
}
.button {
text-transform: uppercase;
font-family: $sless-font-secondary;
margin: 3rem;
font-size: 1.6rem;
padding: 1rem 3rem 1rem 3rem;
border-radius: $border-radius;
display: inline-block;
letter-spacing: .05rem;
transition: .2s ease-out;
box-shadow: 0 .2rem .5rem 0 rgba(0,0,0,0.16), 0 .2rem .10rem 0 rgba(0,0,0,0.12);
}
.button:hover p {
color: #35a6a9;
}
.button:hover {
text-decoration: none;
}
.btnrow {
display: flex;
justify-content: center;
}
.btn-arrow-right {
font-size: 2rem;
margin-top: .35rem;
}
.btn-primary {
background: $sless-blue;
color: white;
transition: all 0.4s;
&:hover {
color: white;
}
&.gradient {
background: $sless-gradient-blue;
&:hover {
background: $sless-gradient-blue-hover;
}
}
}
.btn-secondary {
background-color: #fff;
color: $sless-blue;
&:hover {
background-color: darken($sless-light-blue, 05);
color: darken($sless-blue, 10);
}
}
.btn-lowercase { text-transform: none; }