[퍼블리싱] 엑스 버튼 만들기

CSS로만 사용하여 X 버튼을 만드려고 합니다. 아래와 같이 사용하면 됩니다.

 

HTML

<span className='btn_x'></span>

 

CSS

.btn_x {
			position: absolute;
			top: 20px;
			right: 40px;

			&:hover {
				&::before,
				&::after {
					background-color: #555;
				}
			}

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 3px;
				height: 25px;
				background-color: #999;
				cursor: pointer;
			}

			&::before {
				transform: rotate(45deg) translateX(0px);
			}

			&::after {
				transform: rotate(-45deg) translateX(0px);
			}
		}
	}