65 lines
1.2 KiB
CSS
65 lines
1.2 KiB
CSS
.button {
|
|
border: 2px solid var(--color-secondary);
|
|
cursor: pointer;
|
|
outline: 0;
|
|
margin: 0;
|
|
display: inline-block;
|
|
width: fit-content;
|
|
padding: calc(var(--spacer) / 5) var(--spacer);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family-base);
|
|
font-weight: var(--font-weight-bold);
|
|
border-radius: var(--border-radius);
|
|
transition: 0.2s ease-out;
|
|
color: var(--color-white);
|
|
background: var(--color-secondary);
|
|
user-select: none;
|
|
}
|
|
|
|
.button:hover,
|
|
.button:focus {
|
|
color: var(--color-dark);
|
|
background: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button:active {
|
|
color: var(--color-white);
|
|
background: var(--color-dark);
|
|
border-color: var(--color-dark);
|
|
transition: none;
|
|
}
|
|
|
|
.button:disabled {
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.primary {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.primary:hover,
|
|
.primary:focus {
|
|
}
|
|
|
|
.primary:active {
|
|
}
|
|
|
|
.link {
|
|
border: 0;
|
|
outline: 0;
|
|
display: inline-block;
|
|
width: fit-content;
|
|
background: 0;
|
|
padding: 0;
|
|
color: var(--color-primary);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-base);
|
|
font-family: inherit;
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
}
|