115 lines
2.3 KiB
SCSS
115 lines
2.3 KiB
SCSS
@use "../../assets/stylesheets/base/colors" as *;
|
|
|
|
@keyframes example {
|
|
0% {
|
|
background-position: -100% -100%;
|
|
}
|
|
100% {
|
|
background-position: 100% 100%;
|
|
}
|
|
}
|
|
|
|
button {
|
|
&.btn {
|
|
background: radial-gradient(
|
|
35.83% 70.83% at 0% 0%,
|
|
rgba(93, 52, 69, 0.15) 0%,
|
|
rgba(161, 183, 254, 0) 100%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.05) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
),
|
|
#111;
|
|
border-radius: 37.5px;
|
|
color: $color-text-primary;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
background-clip: padding-box;
|
|
|
|
&:after {
|
|
background: none;
|
|
position: absolute;
|
|
top: -2px;
|
|
bottom: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
background: linear-gradient(
|
|
172.29deg,
|
|
rgba(241, 161, 254, 0.3) 6.23%,
|
|
rgba(161, 183, 254, 0) 94.36%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.5) 0%,
|
|
rgba(170, 170, 170, 0.04) 100%
|
|
);
|
|
content: "";
|
|
z-index: -1;
|
|
border-radius: 37.5px;
|
|
}
|
|
|
|
&:hover {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(194, 64, 118, 0.25) 0%,
|
|
rgba(0, 40, 170, 0) 100%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.05) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
),
|
|
#111;
|
|
background-clip: padding-box;
|
|
background-size: 100% 100%;
|
|
|
|
&:after {
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// @property --a {
|
|
// syntax: "<angle>";
|
|
// inherits: false;
|
|
// initial-value: 90deg;
|
|
// }
|
|
// @property --l {
|
|
// syntax: "<percentage>";
|
|
// inherits: false;
|
|
// initial-value: 10%;
|
|
// }
|
|
// @property --c {
|
|
// syntax: "<color>";
|
|
// inherits: false;
|
|
// initial-value: red;
|
|
// }
|
|
|
|
// button {
|
|
// /* needed for firefox to have a valid output */
|
|
// --a: 80deg;
|
|
// --l: 10%;
|
|
// --c: red;
|
|
// /**/
|
|
// cursor: pointer;
|
|
// height: 200px;
|
|
// transition: --a 0.5s 0.1s, --l 0.5s, --c 0.8s;
|
|
// background: linear-gradient(
|
|
// var(--a),
|
|
// var(--c) var(--l),
|
|
// blue,
|
|
// var(--c) calc(100% - var(--l))
|
|
// );
|
|
// }
|
|
// button:hover {
|
|
// --a: 360deg;
|
|
// --l: 40%;
|
|
// --c: green;
|
|
// }
|