부트스트랩 버튼 완벽 가이드: 색상부터 크기, 상태, 그룹까지

버튼(button) 요소는 사용자가 페이지와 상호작용할 수 있게 해주는 HTML 요소 중에서도 가장 유용한 요소 중 하나입니다.

로그인, 구독 신청, 삭제 또는 열기, 메뉴 표시, 색상 테마 변경 등의 작업은 모두 버튼을 통해 수행됩니다.

하지만 브라우저의 기본 버튼 스타일은 미려하지 못하고 결코 현대적이지 않습니다. 매 프로젝트마다 버튼 스타일을 직접 커스터마이징하면 같은 결과를 얻기 위해 똑같은 코드를 반복해서 작성하게 되죠.

바로 이런 지점에서 부트스트랩(Bootstrap)이 강력한 도움이 됩니다. 부트스트랩 버튼으로 어떤 것들이 가능한지 하나씩 살펴보겠습니다.

색상 버튼(Colored Buttons)

<button class="btn btn-primary">button 1</button>
<button class="btn btn-secondary">button 2</button>
<button class="btn btn-info">button 3</button>
<button class="btn btn-warning">button 4</button>
<button class="btn btn-danger">button 5</button>
<button class="btn btn-success">button 6</button>
<button class="btn btn-light">button 7</button>
<button class="btn btn-dark">button 8</button>
<button class="btn btn-link">button 9</button>

색상과 관련해서는 부트스트랩에서 사전 정의된 모든 색상을 사용할 수 있으며, btn-link 옵션을 적용하면 링크에 사용되는 부트스트랩 스타일을 버튼에도 적용할 수 있습니다.

모든 색상 옵션은 균일하고 깔끔한 패딩을 가지며, 마우스 커서를 올리면(hover) 약간 더 어두운 색조로 부드럽게 전환됩니다. 링크 버튼은 호버 시 밑줄이 표시됩니다.

반면 btn 클래스만 선언하면 부트스트랩은 브라우저의 기본 스타일만 제거합니다:

<button>Without Bootstrap</button>
<button class="btn">With Bootstrap</button>

아래 이미지에서 그 차이를 확인할 수 있습니다:

외곽선 버튼(Outline Buttons)

같은 색상들을 활용해 배경 없이 외곽선만 있는 버튼을 만들 수도 있습니다:

<button class="btn btn-outline-primary">button 1</button>
<button class="btn btn-outline-secondary">button 2</button>
<button class="btn btn-outline-info">button 3</button>
<button class="btn btn-outline-warning">button 4</button>
<button class="btn btn-outline-danger">button 5</button>
<button class="btn btn-outline-success">button 6</button>
<button class="btn btn-outline-light">button 7</button>
<button class="btn btn-outline-dark">button 8</button>
<button class="btn btn-outline-link">button 9</button>

이 버튼들은 외곽선과 동일한 색상을 배경색으로 가지며, 텍스트 색상은 명도 대비에 따라 흰색 또는 검은색으로 자동 지정됩니다. light와 warning(노란색) 계열은 검은색 텍스트를 사용합니다. 다만 link 버전은 이 옵션을 지원하지 않습니다.

버튼 크기(Sizing)

부트스트랩은 버튼에 대해 small, regular, large 세 가지 크기를 지원합니다. 크기를 선택하려면 아래와 같이 추가 클래스를 지정하면 됩니다:

<div class="m-5">
  <button class="btn btn-primary btn-sm">small button 1</button>
  <button class="btn btn-warning btn-sm">small button 2</button>
  <button class="btn btn-primary btn-sm">small button 3</button>
</div>
<div class="m-5">
  <button class="btn btn-primary">regular button 1</button>
  <button class="btn btn-warning">regular button 2</button>
  <button class="btn btn-danger">regular button 3</button>
</div>
<div class="m-5">
  <button class="btn btn-primary btn-lg">large button 1</button>
  <button class="btn btn-warning btn-lg">large button 2</button>
  <button class="btn btn-danger btn-lg">large button 3</button>
</div>

위 예제에서는 각 크기별로 버튼 세 개씩 만들고, m-5 클래스가 적용된 div로 감싸 여백을 주어 버튼들 사이에 적절한 간격을 확보했습니다.

블록 레벨 버튼(Block Level Buttons)

부모 요소의 전체 폭을 차지하는 버튼이 필요하다면 btn-block 클래스를 추가하면 됩니다. 이 기능이 가장 많이 활용되는 대표적인 사례인 간단한 폼(form)을 만들어 보겠습니다.

<div class="form-group">
  <label for="username">username</label>
  <input type="text" class="form-control" />
  <div class="form-group"></div>
  <label for="email">Email</label>
  <input type="email" class="form-control" />
</div>
<button class="btn btn-lg btn-block btn-primary">
  Block Level Button
</button>
<button class="btn btn-lg btn-secondary my-2">Regular button</button>
</form>

여기서는 부트스트랩의 폼 관련 클래스에 대한 세부 내용은 다루지 않겠습니다.

사용자명(username)과 이메일(email)을 입력받는 간단한 폼을 구성했고, 블록 레벨 버튼 하나와 일반 버튼 하나를 함께 배치했습니다.

my-2 역시 두 버튼 사이를 벌리기 위해 추가한 위쪽 마진(margin-top) 유틸리티 클래스입니다.

두 버튼의 차이는 아래에서 확인할 수 있습니다:

버튼 상태(Button State)

부트스트랩의 다른 많은 컴포넌트와 마찬가지로, active 또는 disabled 상태 클래스를 사용해 버튼의 모양을 변경할 수 있습니다.

활성(Active) 상태

active 상태가 적용된 버튼은 배경, 테두리, 그림자가 약간 더 어둡게 표시됩니다.

<button class="btn btn-primary">Regular</button>
<button class="btn btn-primary active">Active</button>
<button class="btn btn-primary">Regular</button>

비활성(Disabled) 상태

반대로 비활성 버튼은 동일한 속성들이 더 밝은 색조로 표현됩니다. 단, disabled 클래스를 추가하는 것은 버튼을 비활성처럼 '보이게' 할 뿐이라는 점에 유의하세요. 실제로 비활성화하려면 버튼의 속성(attribute)으로 선언해야 합니다:

<button class="btn btn-primary disabled">Disabled Looking</button>
<button class="btn btn-primary" disabled>Truly Disabled</button>

disabled 클래스만 적용된 버튼은 여전히 클릭할 수 있으며, 클릭 이벤트가 연결되어 있다면 해당 동작도 그대로 실행됩니다.

보조 기술(assistive technology) 사용자를 위해서는 aria-disabled="true" 속성도 함께 포함해야 합니다. 이렇게 하면 화면 낭독기(screen reader) 사용자에게 화면에 비활성 버튼이 존재한다는 정보를 전달할 수 있습니다.

또한 현재 <a> 요소는 disabled 속성을 지원하지 않기 때문에, 비활성 모양을 만들려면 클래스를 사용해야 합니다.

<a class="btn btn-danger" disabled>Attribute Not Supported</a>
<a href="#" class="btn btn-danger disabled">Disabled Look</a>

<a> 태그에 disabled 클래스를 적용하면 CSS 규칙 pointer-events: none이 추가되어 마우스 클릭이 비활성화됩니다.

하지만 이 기능은 아직 모든 웹 브라우저에서 완전히 지원되지 않으며, 설령 지원하는 브라우저라 하더라도 키보드로는 여전히 링크에 접근할 수 있습니다.

기능을 완전히 비활성화하려면 tabindex="-1" 속성을 추가해 키보드로도 포커스를 받을 수 없도록 해야 합니다.

애초에 <a> 태그를 버튼 용도로 사용하는 것은 권장되지 않지만, 이러한 동작 방식을 알아두면 도움이 됩니다.

버튼 그룹(Button Groups)

부트스트랩의 카드(cards) 컴포넌트와 마찬가지로, group 클래스를 활용하면 여러 버튼을 하나의 요소처럼 시각적으로 묶을 수 있습니다.

<div class="btn-group">
  <button class="btn btn-primary">button 1</button>
  <button class="btn btn-warning">button 2</button>
  <button class="btn btn-info">button 3</button>
  <button class="btn btn-danger">button 4</button>
</div>

방법은 아주 간단합니다. 버튼들을 btn-group 클래스가 적용된 div로 감싸기만 하면 끝입니다!

개별 버튼의 동작 방식은 그대로 유지되지만, 이제 버튼들이 서로 딱 붙어 배치되고 바깥쪽 모서리만 깔끔하게 둥글게 처리되어 하나의 통합된 UI처럼 보입니다.

마무리하며

버튼은 거의 모든 웹사이트에서 찾아볼 수 있으며, 온라인 경험에서 매우 중요한 역할을 담당합니다. 계정 로그인, 온라인 주문, 뉴스레터 구독, 심지어 받은 편지함에 쏟아지는 스팸 차단까지 모두 버튼으로 이루어집니다. 버튼이 없다면 웹사이트는 그저 디지털 명함에 불과할 것입니다. 부트스트랩을 활용하면 복잡한 스타일 작업 없이도 일관되고 아름다운 버튼을 손쉽게 구현할 수 있습니다.