.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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.