mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-05-14 08:02:16 +00:00
58 lines
1.1 KiB
SCSS
58 lines
1.1 KiB
SCSS
@use "vars";
|
|
|
|
.button {
|
|
padding: 0 20px;
|
|
|
|
width: max-content;
|
|
height: 35px;
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
|
|
border-radius: 9999px;
|
|
border: 0 solid transparent;
|
|
background-color: rgba(vars.$light, 0.04);
|
|
color: vars.$light;
|
|
|
|
overflow: hidden;
|
|
|
|
&:before {
|
|
content: "";
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
border-radius: 9999px;
|
|
background-color: rgba(vars.$accent, 0.13);
|
|
|
|
opacity: 0;
|
|
transform: scaleX(0%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
outline: 0 solid transparent;
|
|
|
|
&:before {
|
|
opacity: 1;
|
|
transform: scaleX(100%);
|
|
transition:
|
|
opacity 0.5s cubic-bezier(0, 1, 0, 1),
|
|
transform 0.5s cubic-bezier(0, 1, 0, 1);
|
|
}
|
|
}
|
|
}
|