how to convert scss into css - html

Question

I am trying to figure it out but don't know to how to convert this SCSS file into Css file can you please help me to solve this problem any help would be appreciated i want this animation hover effect but in simple I tried to add this scss but its not working properly some
Here its codepen link : https://codepen.io/electerious/pen/qPjbGm
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #fcf3ec;
}
.button {
--offset: 10px;
--border-size: 2px;
display: block;
position: relative;
padding: 1.5em 3em;
appearance: none;
border: 0;
background: transparent;
color: #e55743;
text-transform: uppercase;
letter-spacing: .25em;
outline: none;
cursor: pointer;
font-weight: bold;
border-radius: 0;
box-shadow: inset 0 0 0 var(--border-size) currentcolor;
transition: background .8s ease;
&:hover {
background: rgba(100, 0, 0, .03);
}
&__horizontal,
&__vertical {
position: absolute;
top: var(--horizontal-offset, 0);
right: var(--vertical-offset, 0);
bottom: var(--horizontal-offset, 0);
left: var(--vertical-offset, 0);
transition: transform .8s ease;
will-change: transform;
&::before {
content: '';
position: absolute;
border: inherit;
}
}
&__horizontal {
--vertical-offset: calc(var(--offset) * -1);
border-top: var(--border-size) solid currentcolor;
border-bottom: var(--border-size) solid currentcolor;
&::before {
top: calc(var(--vertical-offset) - var(--border-size));
bottom: calc(var(--vertical-offset) - var(--border-size));
left: calc(var(--vertical-offset) * -1);
right: calc(var(--vertical-offset) * -1);
}
}
&:hover &__horizontal {
transform: scaleX(0);
}
&__vertical {
--horizontal-offset: calc(var(--offset) * -1);
border-left: var(--border-size) solid currentcolor;
border-right: var(--border-size) solid currentcolor;
&::before {
top: calc(var(--horizontal-offset) * -1);
bottom: calc(var(--horizontal-offset) * -1);
left: calc(var(--horizontal-offset) - var(--border-size));
right: calc(var(--horizontal-offset) - var(--border-size));
}
}
&:hover &__vertical {
transform: scaleY(0);
}
}
<button class="button">
Fancy Button
<div class="button__horizontal"></div>
<div class="button__vertical"></div>
</button>

Answer 1

In this Codepen CSS code block there is a dropdown click on it and then choose view compiled CSS it will convert SCSS to CSS.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #fcf3ec;
}
.button {
--offset: 10px;
--border-size: 2px;
display: block;
position: relative;
padding: 1.5em 3em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: transparent;
color: #e55743;
text-transform: uppercase;
letter-spacing: 0.25em;
outline: none;
cursor: pointer;
font-weight: bold;
border-radius: 0;
box-shadow: inset 0 0 0 var(--border-size) currentcolor;
transition: background 0.8s ease;
}
.button:hover {
background: rgba(100, 0, 0, 0.03);
}
.button__horizontal, .button__vertical {
position: absolute;
top: var(--horizontal-offset, 0);
right: var(--vertical-offset, 0);
bottom: var(--horizontal-offset, 0);
left: var(--vertical-offset, 0);
transition: transform 0.8s ease;
will-change: transform;
}
.button__horizontal::before, .button__vertical::before {
content: "";
position: absolute;
border: inherit;
}
.button__horizontal {
--vertical-offset: calc(var(--offset) * -1);
border-top: var(--border-size) solid currentcolor;
border-bottom: var(--border-size) solid currentcolor;
}
.button__horizontal::before {
top: calc(var(--vertical-offset) - var(--border-size));
bottom: calc(var(--vertical-offset) - var(--border-size));
left: calc(var(--vertical-offset) * -1);
right: calc(var(--vertical-offset) * -1);
}
.button:hover .button__horizontal {
transform: scaleX(0);
}
.button__vertical {
--horizontal-offset: calc(var(--offset) * -1);
border-left: var(--border-size) solid currentcolor;
border-right: var(--border-size) solid currentcolor;
}
.button__vertical::before {
top: calc(var(--horizontal-offset) * -1);
bottom: calc(var(--horizontal-offset) * -1);
left: calc(var(--horizontal-offset) - var(--border-size));
right: calc(var(--horizontal-offset) - var(--border-size));
}
.button:hover .button__vertical {
transform: scaleY(0);
}