---
id: howto-css-text-buttons
title: "How To - Text Buttons"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["ghost text button CSS", "background-color inherit"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.81
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["howto", "css", "w3schools", "buttons"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_text_buttons.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Text Buttons]]

## 🎯 한 줄 통찰 (One-line insight)
`background-color: inherit;` is the key trick that makes a "text button" invisible-as-a-button in its resting state — rather than setting an explicit background (even `white` or `transparent`, which would still create a visible box against certain page backgrounds), inheriting the PARENT's background color guarantees the button visually blends into whatever surface it sits on, making it look like plain colored text until hovered; this is the THIRD distinct button color-scheme this cookbook has shown for the same five semantic names (success/info/warning/danger/default), after Alert Buttons (solid fill) and Outline Buttons (bordered, inverts on hover) — text buttons are the "no fill, no border" endpoint of that same progression. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`background-color: inherit`** — takes on whatever background color the button's PARENT has, making the button invisible as a distinct shape until interacted with. [S1]
- **`border: none`** — removes the outline entirely, unlike the Outline Buttons variant. [S1]
- **Two hover variants** — a shared neutral hover (`background: #eee;` for ALL variants) OR per-variant colored hover (each semantic class gets its OWN hover background, matching its Alert Buttons counterpart color). [S1]
- **Third point in the fill/border/text progression** — Alert Buttons (solid fill always) → Outline Buttons (border, fills on hover) → Text Buttons (no fill, no border, colored text only). [S1]

## 📖 세부 내용 (Details)
- Shared neutral hover: `.btn { border: none; background-color: inherit; } .btn:hover { background: #eee; } .success { color: green; }`. [S1]
- Per-variant colored hover: `.success:hover { background-color: #04AA6D; color: white; }` (matches Alert Buttons' success color exactly). [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **fill/border/text 3단계 진행의 마지막 지점**: `[[HOWTO CSS Alert Buttons]]`(항상 배경 채움) → `[[HOWTO CSS Outline Buttons]]`(테두리만, hover 시 채워짐) → 이 레시피(배경 없음, hover 시에만 색상 등장)로 이어지는 3단계 색상 스킴 진행의 마지막 단계라는 점이 확인됨 — 동일한 5개 시맨틱 이름(success/info/warning/danger/default)에 세 가지 다른 시각적 무게를 적용하는 셈. [S1]

## 🛠️ 적용 사례 (Applied in summary)
배경이 없어 평범한 텍스트처럼 보이다가 hover 시 색이 채워지는 5가지 시맨틱 버튼 예제가 원문에서 직접 제시됨. [S1]

## 💻 코드 패턴 (Code patterns)
Text button — invisible fill via background-color:inherit (CSS):
```css
.btn {
  border: none;
  background-color: inherit; /* blends into parent background */
  padding: 14px 28px;
}
.success { color: green; }
.success:hover { background-color: #04AA6D; color: white; }
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
- **신뢰 점수:** 0.81
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3Schools HOW TO]]
- **관련 개념:** [[HOWTO CSS Alert Buttons]], [[HOWTO CSS Outline Buttons]]
- **참조 맥락:** CSS Buttons 섹션의 마지막 챕터.

## 📚 출처 (Sources)
- [S1] W3Schools — How To - Text Buttons — https://www.w3schools.com/howto/howto_css_text_buttons.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Text Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).