.wrapper
.arrow
.line
.line
View Compiled
.wrapper {
position: relative;
width: 100vw;
min-height: 100vh;
background: hsl(20, 100%, 64%);;
display: flex;
justify-content: center;
align-items: center;
.arrow {
width: 40px;
height: 40px;
border-radius: 20px;
background: hsl(40, 100%, 30%);;
transition: 0.2s ease-in-out;
.line {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 4px;
border-radius: 2px;
background: hsl(30, 100%, 80%);
transform-origin: center;
transform: translate(-50%, -50%) rotate(45deg);
&:nth-child(2) {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
&:hover {
transform: rotate(45deg);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.