Mixins: Buttons
This defines a set of mixins that can be used to create buttons in your project.
Where to Find
- You can find these mixins in
integration/snippets/mixins/buttons.scss. - To see all of the button style code, see here.
Common Button Mixin
This sets the base color and family for all the specific button mixins. This accepts as an argument the padding for the button as a string with two values.
1@mixin btn-common($padding: 15px 20px) {
2 z-index: 1;
3 display: flex;
4 position: relative;
5 align-items: center;
6 width: fit-content;
7 padding: $padding;
8 border: 1px solid transparent;
9 font-family: $font-barlow-sans;
10 transition: all 0.3s ease-in-out;
11 text-transform: uppercase;
12 &::after {
13 @include after-before;
14 z-index: -1;
15 inset: -1px;
16 width: calc(100% + 2px);
17 height: calc(100% + 2px);
18 opacity: 0;
19 transition: opacity 0.3s ease-in-out;
20 }
21 &:hover {
22 text-decoration: none;
23 }
24}White Background Button
This button will work well when you want a light colored button to create contrast with a dark background or when you want to use it as a secondary button.
1@mixin btn-bg-white {
2 @include btn-common;
3 background-color: color('pure-white');
4 border-color: rgba(color('pure-navy'), 0.2);
5 border-radius: 3px;
6 font-size: 14px;
7 line-height: 1.2;
8 font-weight: $font-weight-bold;
9 color: color('pure-navy');
10 &:hover {
11 color: color('pure-navy');
12 }
13 @include media-breakpoint-up(lg) {
14 &:hover {
15 background-color: var(--color-primary-tangerine);
16 border-color: var(--color-primary-tangerine);
17 color: color('pure-black');
18 }
19 }
20}Blue Background Button
This button will work well when you want a dark colored button.
1@mixin btn-bg-blue {
2 @include btn-common;
3 background-color: color('pure-navy');
4 border-color: color('pure-navy');
5 border-radius: 3px;
6 font-size: 14px;
7 line-height: 1.2;
8 font-weight: $font-weight-bold;
9 color: color('pure-white');
10 &:hover {
11 color: color('pure-white');
12 }
13 &::after {
14 background: linear-gradient(0deg, rgba(color('pure-black'), 0.3), rgba(color('pure-black'), 0.3)),
15 linear-gradient(0deg, color('pure-navy'), color('pure-navy'));
16 border-radius: 3px;
17 }
18 @include media-breakpoint-up(lg) {
19 &:hover {
20 color: color('pure-white');
21 &:after {
22 opacity: 1;
23 }
24 }
25 }
26}Yellow Background Button with arrow
1@mixin btn-bg-yellow-with-arrow {
2 @include btn-common(18px 20px);
3 column-gap: 20px;
4 background-color: var(--color-primary-tangerine);
5 border-color: var(--color-primary-tangerine);
6 border-radius: 3px;
7 font-size: 14px;
8 line-height: 1.2;
9 font-weight: $font-weight-semi-bold;
10 color: color('pure-black');
11 &:hover {
12 color: color('pure-black');
13 }
14 &::before {
15 @include arrow-black;
16 @include after-before;
17 position: static;
18 flex: none;
19 transition: transform 0.3s ease-in-out;
20 }
21 @include media-breakpoint-up(lg) {
22 font-size: 16px;
23 &::before {
24 @include arrow-black-large;
25 }
26 &:hover {
27 color: color('pure-black');
28 &::before {
29 transform: rotate(45deg);
30 }
31 }
32 }
33}Yellow Background Button with arrow large
1@mixin btn-bg-yellow-with-arrow-large {
2 @include btn-common(12px 20px);
3 column-gap: 20px;
4 background-color: var(--color-primary-tangerine);
5 border-color: var(--color-primary-tangerine);
6 border-radius: 3px;
7 font-size: 16px;
8 line-height: 1.2;
9 font-weight: $font-weight-semi-bold;
10 color: color('pure-black');
11 &:hover {
12 color: color('pure-black');
13 }
14 &::before {
15 @include arrow-black;
16 @include after-before;
17 position: static;
18 flex: none;
19 transition: transform 0.3s ease-in-out;
20 }
21 @include media-breakpoint-up(lg) {
22 column-gap: 30px;
23 padding: 19px 30px;
24 font-size: 18px;
25 &::before {
26 @include arrow-black-large;
27 }
28 &:hover {
29 color: color('pure-black');
30 &::before {
31 transform: rotate(45deg);
32 }
33 }
34 }
35}Transparent Background Button
1@mixin btn-bg-transparent {
2 @include btn-common(18px 20px);
3 background-color: transparent;
4 border-color: rgba(color('pure-white'), 0.2);
5 border-radius: 3px;
6 font-size: 14px;
7 line-height: 1.2;
8 font-weight: $font-weight-semi-bold;
9 color: var(--color-primary-tangerine);
10 &:hover {
11 color: var(--color-primary-tangerine);
12 }
13 @include media-breakpoint-up(lg) {
14 padding: 23.5px 30px;
15 font-size: 18px;
16 &:hover {
17 background-color: var(--color-primary-tangerine);
18 border-color: var(--color-primary-tangerine);
19 color: color('midnight');
20 }
21 }
22}Transparent Background Button Large
1@mixin btn-large-bg-transparent{
2 @include btn-bg-white;
3 color: color('pure-black');
4 background-color: transparent;
5 column-gap: 20px;
6 font-weight:$font-weight-semi-bold;
7 &::before {
8 @include arrow-black;
9 @include after-before;
10 position: static;
11 flex: none;
12 transition: transform 0.3s ease-in-out;
13 }
14 @include media-breakpoint-up(lg) {
15 font-size: 16px;
16 &::before {
17 @include arrow-black-large;
18 }
19 &:hover {
20 background-color: transparent;
21 border-color: rgba(color('pure-navy'), 0.2);
22 &::before {
23 transform: rotate(45deg);
24 }
25 }
26 }
27}