[CSS] X(엑스) 버튼 만들기

닫기 버튼을 구현하려하는데 이미지를 넣고싶지는 않고 원하는 아이콘은 구해지지 않아서 직접 만드는 방법이 있나 알아보다가 만들게 되었다.

 

.btn_close {
	display:inline-block;
	width:20px;
	height:20px;
}
.btn_close:before, .btn_close:after {
	margin-left:10px;
	position:absolute;
	content:' ';
	height:20px;
	width:1px;
	background-color:#fff
}
.btn_close:before{
	transform:rotate(45deg);
}
.btn_close:after{
	transform:rotate(-45deg);
}

width나 height는 입맛에 맞게 바꾸면 된다.

before과 after의 width는 선의 굵기라고 생각하면 된다.

.btn_close의 display:inline-block;는 선 말고 배경을 누르더라도 닫기가 실행되도록 넣었고, 아래에서 margin-left를 .btn_close의 width 절반을 해주어야 중앙에 위치하게 된다.