a.bc-mask-button{
cursor: pointer;
}
.bc-mask-button{
all: unset;
--bg: rgba(0,0,0);
--fg: hsl(0 0% 90%);
--button-bg: var(--bg);
--button-fg: var(--fg);
--transition-duration: 0.5s; 
color: var(--button-fg);
padding: 15px 30px; 
border-radius: 0;
background: var(--button-bg); 
touch-action: none;
position: relative;
overflow: hidden;
display: grid;
width: fit-content;
}
.bc-mask-button__title{
position: relative;
mix-blend-mode: difference;
}
.bc-mask-button__back{
will-change: transform;
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.bc-mask-button__back > span{
left: calc(var(--x, 0) * 1px);
top: calc(var(--y, 0) * 1px);
width: 50%; 
display: inline-block;
aspect-ratio: 1;
transform: translate(-50%, -50%) scale(var(--active, 0));
transition: transform; 
transition-duration: calc(var(--transition-duration) / 2); 
background: hsl(0 0% 90%);
position: absolute;
pointer-events: none;
overflow: hidden;
--border-radius2-top: 100px; 
--border-radius2-left: 100px; 
--border-radius2-bottom: 100px; 
--border-radius2-right: 100px; 
border-radius: var(--border-radius2-top) var(--border-radius2-left) var(--border-radius2-bottom) var(--border-radius2-right); 
}
.bc-mask-button:is(:hover, :focus-visible) {
--active: 1.5;
}
.bc-mask-button:active {
--active: 3;
}
.bc-mask-button:active .bc-mask-button__back > span {
transition: transform 0.15s; 
}
@supports (transition-timing-function: linear(0, 1)) {
.bc-mask-button:is(:hover, :focus-visible) .bc-mask-button__back > span {
transition-duration: var(--transition-duration); /**/
transition-timing-function: linear(
0, 0.5007 7.21%, 0.7803 12.29%,
0.8883 14.93%, 0.9724 17.63%,
1.0343 20.44%, 1.0754 23.44%,
1.0898 25.22%, 1.0984 27.11%,
1.1014 29.15%, 1.0989 31.4%,
1.0854 35.23%, 1.0196 48.86%,
1.0043 54.06%, 0.9956 59.6%,
0.9925 68.11%, 1
);
}
}