고스트 버튼
분류: 버튼
평상시에는 배경과 테두리가 전혀 없다가 마우스를 올리거나(hover) 포커스가 갔을 때만 배경색이 옅게 드러나는, 가장 절제된 형태의 버튼입니다. btn-ghost-* 클래스로 적용하며, 툴바나 카드 액션처럼 시각적 무게를 최소화해야 하는 위치에 적합합니다. 아웃라인 버튼보다 한 단계 더 배경에 가까운 스타일이라고 생각하면 됩니다.
소스
<div class="card overflow-auto">
<div class="card-status-top bg-dark-overlay"></div>
<div class="card-header">
<h3 class="card-title">고스트 버튼</h3>
</div>
<div class="card-body">
<p>
고스트 버튼을 사용하려면 <code>.btn-ghost-*</code> 클래스를 사용하세요.
</p>
<div class="row g-2 align-items-center">
<div class="col-12 col-xl-2 font-weight-semibold">일반</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-primary w-100">
프라이머리
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-secondary w-100">
세컨더리
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-success w-100">
성공
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-warning w-100">
경고
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-danger w-100">
위험
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-info w-100">
정보
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-dark w-100">
다크
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
<a href="#" class="btn btn-ghost-light w-100">
라이트
</a>
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-12 col-xl-2 font-weight-semibold">활성 상태</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-primary active w-100">
프라이머리
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-secondary active w-100">
세컨더리
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-success active w-100">
성공
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-warning active w-100">
경고
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-danger active w-100">
위험
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-info active w-100">
정보
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-dark active w-100">
다크
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
<a href="#" class="btn btn-ghost-light active w-100">
라이트
</a>
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-12 col-xl-2 font-weight-semibold">비활성화</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-primary disabled w-100">
프라이머리
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-secondary disabled w-100">
세컨더리
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-success disabled w-100">
성공
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-warning disabled w-100">
경고
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-danger disabled w-100">
위험
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-info disabled w-100">
정보
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl py-3">
<a href="#" class="btn btn-ghost-dark disabled w-100">
다크
</a>
</div>
<div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
<a href="#" class="btn btn-ghost-light disabled w-100">
라이트
</a>
</div>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
btn | 버튼의 공통 크기·여백·전환 효과를 적용하는 Bootstrap 기본 클래스 |
btn-ghost-primary / btn-ghost-secondary / btn-ghost-success / btn-ghost-warning / btn-ghost-danger / btn-ghost-info / btn-ghost-dark / btn-ghost-light | 기본 상태에서는 배경·테두리 없이 글자만 색상을 표시하고, hover/focus 시에만 옅은 배경색을 드러내는 Tabler 확장 스타일 |
active | 버튼을 눌린 상태(활성)로 강제 표시 |
disabled | 버튼을 비활성화 상태로 표시(클릭 불가, 흐림 처리) |
w-100 | 버튼 너비를 부모 열의 100%로 확장 |
row, g-2 | Bootstrap 그리드 행과 열 사이 간격(gutter) |
col-12, col-6, col-sm-4, col-md-2, col-xl, col-xl-2 | 화면 폭 구간별로 버튼 열의 너비를 다르게 지정하는 반응형 그리드 열 |
align-items-center | 행(row) 안의 항목을 세로 중앙에 정렬 |
font-weight-semibold | 상태 구분 라벨 글자 굵기를 semibold로 지정 |
py-3 | 버튼 열의 상하 여백을 지정 |
bg-dark | 고스트 라이트 버튼이 배경과 구분되도록 어두운 배경을 지정 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/버튼-고스트-버튼.html 경로에서 렌더링 결과를 확인할 수 있습니다.