CSS만으로 X 버튼 만드는 두가지 방법

닫기 버튼 만드는 경우 그냥 X 쓰기에는 세로로 긴 알파벳 모양이라 디자인적으로 좀 그렇고,

이미지로 사용하기에는 살짝 귀찮고했는데, CSS 만으로 X 버튼 만들기가 가능하다는 사실!!

 

첫번째 방법 :  content: "\00d7" 를 활용

 

:after 에 content: "\00d7"; 만 추가해주면 아주 간단하게 X 버튼이 가능하다.

.close {display:inline-block;*display:inline;}
.close:after {display: inline-block;content: "\00d7"; font-size:15pt;}

 

그러면 이렇게 딱 깔끔한 X 버튼을 만들 수 있다.

크기는 font-size로 조정하면 되고 크기를 키울 수록 굵기가 자동으로 굵어진다.

 

두번째 방법 : transform: rotate(45deg)를 활용

:before :after 요소로 각각 막대를 만들어 45도 회전 시켜서 만드는 방법.

 

첫번째 방법과 다르게 굵기를 조절(width:2px)할 수 있는 장점이 있다.

또한 각각 막대를 사용해서 만들기 때문에 햄버거 메뉴나 클릭시 모션을 넣어야하는 경우 유용하게 사용이 가능하다.

 

.close {width:50px;height: 50px;}
.close:before, .close:after {position: absolute;left: 15px;content:' ';height: 40px;width: 2px;background-color: #000;}
.close:before {transform: rotate(45deg);}
.close:after {transform: rotate(-45deg);}