app/assets/stylesheets/atoms/_buttons.scss
.button {
@include transition($animation-fast background-color);
display: inline-block;
position: relative;
cursor: pointer;
font-weight: 500;
border: 1px solid $button-color;
border-color: shade($button-color, 15%)r;
border-bottom: 2px solid shade($button-color, 15%);
background-color: tint($button-color, 30%);
padding: .5em 1em;
border-radius: $border-radius;
margin-bottom: .5em;
margin-right: .3em;
text-decoration: none;
color: #000000;
&:hover {
background-color: $button-color;
color: #000000;
}
&:active {
background-color: shade($button-color, 15%);
}
&:focus {
outline: $form-focus;
}
}
.button--full-mobile {
width: 100%;
text-align: center;
@include media($tablet-up) {
width: auto;
text-align: initial;
}
}
.button--cta {
color: #FFFFFF;
background-color: $button-cta-color;
border-color: $button-cta-border-color;
border-bottom-color: shade($button-cta-color, 15%);
&:hover {
background-color: tint($button-cta-color, 20%);
color: #FFFFFF;
}
&:active {
background-color: shade($button-cta-color, 15%);
}
&[disabled] {
opacity: .5;
cursor: not-allowed;
}
}
.button--primary {
color: #FFFFFF;
background-color: $color-teal;
border-color: $color-teal;
border-bottom-color: shade($color-teal, 15%);
&:hover {
background-color: tint($color-teal, 20%);
color: #FFFFFF;
}
&:active {
background-color: shade($color-teal, 15%);
}
}
.button--disabled {
opacity: .5;
cursor: not-allowed;
}
.button--danger {
color: $color-red;
&:hover {
color: $color-red;
}
}
.button--small {
font-size: $font-size-small;
padding: .2em .7em;
border-bottom-width: 1px;
}
.button--inline {
font-size: .8em;
padding: .2em;
border-bottom-width: 1px;
}
.button--large {
font-size: $font-size-h3;
}
.button__icon {
margin-left: .5em;
}
.button__icon--left {
margin-right: .5em;
}