69 lines
1.2 KiB
SCSS
69 lines
1.2 KiB
SCSS
.button {
|
|
appearance: none;
|
|
padding: 0.5rem 1.5rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background linear 0.33s;
|
|
|
|
&[disabled] {
|
|
cursor: default;
|
|
}
|
|
|
|
&.default {
|
|
border: 1px solid #b9b9b9;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgb(246 246 246) 0%,
|
|
rgb(241 241 241) 100%
|
|
);
|
|
|
|
&:not([disabled]) {
|
|
&:hover,
|
|
&:focus-visible {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgb(255 255 255) 0%,
|
|
rgb(250 250 250) 100%
|
|
);
|
|
}
|
|
|
|
&:active {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgb(241 241 241) 0%,
|
|
rgb(246 246 246) 100%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
&.primary {
|
|
border: 1px solid #00aaff;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgb(133 216 255) 0%,
|
|
rgba(59, 190, 255, 1) 100%
|
|
);
|
|
|
|
&:not([disabled]) {
|
|
&:hover,
|
|
&:focus-visible {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgb(145 220 255) 0%,
|
|
rgb(84 198 255) 100%
|
|
);
|
|
}
|
|
|
|
&:active {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgb(77, 196, 255) 0%,
|
|
rgb(124, 213, 255) 100%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
&.secondary {
|
|
}
|
|
}
|