a태그 텍스트 가운데 정렬 후 언더바 제거, css로 버튼처럼 만들기

a태그를 텍스트 그대로 사용 하는 경우도 있지만,

마치 버튼처럼 만들어서 사용하는 경우가 굉장히 많다.

 

a태그를 이용해서 버튼처럼 활용하는 css를 공유해보려고 한다. 

 

	
  .aButton{  
  cursor: pointer;    
    text-decoration: none;
    
    border-radius: 8px;
    height: 50px;
    width: 130px;
    padding: 16px 32px;
    text-align: center;
    
    background: #6d6afe;
    color: #ffffff;
    font-weight: 600;
    font-size: 17px;
}

 

위 코드를 순서대로 설명하자면-

 cursor: pointer;    :  a태그의 경우엔 마우스를 대면 기본이 손 모양(pointer)으로 되니 생략해도 되지만, 마우스를 댔을 때 나타나는 마우스 포인터에 다양한 모양의 옵션을 설정할 수 있다. 

언더라인이 있는 경우

text-decoration: none; : a태그 특성상 링크라는 걸 언더바를 통해 보여주는데 이 옵션을 해야 아래 언더라인이 사라진다. 

border-radius : 테두리의 둥근정도를 의미한다. 혹시 직각을 원하면 생략해도 된다.

height, width : 버튼의 높이와 너비

padding : 이걸 사용해야 아래 위 정렬도 할 수 있다! 정확히는 정렬이라기보다 버튼 안에 실제 텍스트(컨텐츠)와 라인의 간격을 만들어줘서 가운데에 위치한 것처럼 효과를 내는 것이다. 

진한 부분이 컨텐츠, 연한 부분이 padding이라 보면 된다.

위 이미지는 차례대로 패딩을 위 코드처럼 준 경우, 16px로 하나로 통일, 상하만 16px, 좌우는 0으로 준 경우이다.

-> 정해진 버튼의 사이즈가 있거나 한개에만 적용하는 경우 버튼 사이즈만으로 크게 상관은 없지만, 여러군데 사용한다면 좌우 여백을 통일해주고, 버튼의 가로길이를 유동적으로 하는 것이 좋을 듯 하다. 

 

text-align : 텍스트를 가운데로 정렬해준다. (padding으로 어느정도 정렬은 되지만, 컨텐츠의 길이에 꼭 맞게 간격을 줄 수 없으니 가운데 정렬을 해준다. 

background : 버튼 배경의 컬러, color는 텍스트의 컬러이다. (그라데이션을 사용해도 예쁘다!☺️)

font-weight : 폰트의 두께 font-size는 폰트의 크기이다. 

 

 

 

자주 쓰는 기능이다보니 기억해두는 것이 좋다.