[CSS] 버튼 꾸미기

소요 시간: 5분 조회수: 123

웹디자인에서 버튼은 사용자가 가장 많이 상호작용하는 요소 중 하나입니다. 버튼은 데이터를 서버로 전송하거나 웹 페이지의 테마를 바꾸는 등 다양한 작업을 수행하게 합니다.

버튼은 사용자와 상호작용하기 때문에 무엇보다 중요하게 스타일링해야 합니다. 이 글에서는 CSS로 버튼을 꾸미는 방법에 대해 알아보겠습니다.


버튼의 기본 스타일

크기

버튼의 크기는 font-size 속성으로 조절할 수 있습니다. 가로와 세로의 비율을 유지하면서 커지거나 작아집니다.

font-size: 20px;

라벨 크기를 유지하면서 여백만 바꾸고 싶다면 padding 속성으로 조정합니다.

padding: 10px 20px;

보통 값을 두 개 입력하며, 앞의 값은 위아래 여백, 뒤의 값은 좌우 여백입니다.

다음 값을 보편으로 사용합니다.

둥근 버튼

border-radius 속성을 사용하여 버튼에 둥근 모서리를 추가합니다.

.btn {
  border-radius: 4px;
}

컬러 버튼 테두리

테두리 속성을 사용하여 버튼에 컬러 테두리를 추가할 수 있습니다.


버튼 꾸미기

HTML

button 태그로 버튼을 정의하고 태그 안에 레이블을 입력합니다. 양식 제출용이 아니라면 type 속성으로 클릭 가능한 버튼임을 명시합니다.

<button type="button" class="btn btn-primary">클릭!</button>

button 요소는 input 요소보다 스타일이 다양합니다. 텍스트뿐만 아니라 이미지를 추가하거나 ::after와 ::before 같은 의사 요소로 더 복잡한 스타일도 적용할 수 있습니다.

CSS

변수 선언

먼저 색상, 크기 등을 변수에 입력합니다.

:root {
  --border-radius: 5px;
  --primary-color: #0d6efd;
  --primary-hover-color: #0b5ed7;
}

CSS 변수는 :root 의사 클래스 안에 정의하며, 변수 앞에 --를 붙입니다. 이렇게 속성 값을 따로 모으면 다른 사람이 보기 편하고 수정이 빠릅니다.

공통 스타일

btn 클래스에는 모든 버튼이 가진 특성을 입력합니다.

.btn {
  padding: 1em 2em;
  border: 0;
  border-radius: var(--border-radius);
}

패딩 값을 두 개로 입력하면 앞의 값은 위아래 여백, 뒤의 값은 좌우 여백을 가리킵니다. em은 상대적인 크기 단위로, 상위 요소의 폰트 사이즈가 기준입니다.

상태별 스타일

버튼의 기능을 사용자에게 직관적으로 알리기 위해 색을 사용합니다. 새로운 클래스를 만들어 배경색을 정합니다.

.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
}

배경색이 진하면 폰트 색은 하얗게, 밝으면 검은색으로 설정하여 대비를 줍니다.


전체 코드

:root {
  --border-radius: 5px;
  --primary-color: #0d6efd;
  --primary-hover-color: #0b5ed7;
}

.btn {
  padding: 1em 2em;
  border: 0;
  border-radius: var(--border-radius);
}

.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--primary-hover-color);
  color: #fff;
}


결론

버튼은 웹디자인에서 매우 중요한 요소입니다. 사용자 경험을 향상시키기 위해서는 사용자가 쉽게 찾고 직관적으로 이해할 수 있는 버튼을 디자인하는 것이 중요합니다. 이번 글에서 소개한 가이드라인과 예제 코드를 참고하여, 더 나은 사용자 경험을 제공하는 버튼을 디자인해보세요. 이를 통해 웹사이트의 목적을 효과적으로 달성하고, 사용자 만족도를 높일 수 있을 것입니다.

인기글

CSS 리스트