I stumbled upon this interesting +/- toggle button design on a codepen here
The only problem is that the CSS processor used in the codepen is SCSS, and when I try to convert it to CSS, it stops functioning.
My website project is using CSS, and when I try to integrate the CSS code from the codepen, my VS Code editor starts flagging errors. Is there a way for me to make this work with regular CSS?
.closed {
.vertical {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
}
.horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(-90deg);
opacity: 1;
}
}
.opened {
opacity: 1;
.vertical {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
}
.horizontal {
transition: all 0.5s ease-in-out;
transform: rotate(90deg);
opacity: 0;
}
}
.circle-plus {
height: 4em;
width: 4em;
font-size: 1em;
opacity: .7;
}
.circle-plus .circle {
position: relative;
width: 2.55em;
height: 2.5em;
border-radius: 100%;
border: solid .5em #DFDAD7;
}
.circle-plus .circle .horizontal {
position: absolute;
background-color: red;
width: 30px;
height: 5px;
left: 50%;
margin-left: -15px;
top: 50%;
margin-top: -2.5px;
}
.circle-plus .circle .vertical {
position: absolute;
background-color: red;
width: 5px;
height: 30px;
left: 50%;
margin-left: -2.5px;
top: 50%;
margin-top: -15px;
}
Any suggestions or help would be greatly appreciated. Thank you!