2nd/10_Wiki/Topic_CSS/CSS_Buttons_Groups.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-button-groups	CSS Button Groups	Frontend	draft	conceptual		button group btn-group horizontal button group vertical button group bordered button group flex buttons		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools buttons flexbox ui	https://www.w3schools.com/css/css3_buttons_groups.asp

CSS Button Groups

🎯 한 줄 통찰 (One-line insight)

A button group is just a set of buttons wrapped in a <div> that becomes a flex container — display: flex lays them out, flex-wrap lets them break to a new line, and flex-direction: column stacks them vertically. [S1]

🧠 핵심 개념 (Core concepts)

• Container = flex — to create a group of buttons, wrap the buttons in a <div> element and add display: flex; to that <div>. [S1]
• Responsive wrapping — add flex-wrap: wrap; so the buttons wrap onto a new line on small screens. [S1]
• Horizontal vs vertical — the default flex direction is horizontal; add flex-direction: column; to display the buttons vertically. [S1]
• Bordered grouping — use the border property to create a bordered button group, and remove the duplicated inner border so adjacent buttons share one line. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Wrap-and-flex pattern — .btn-group { display: flex; } over a set of .button children produces an aligned group without per-button positioning. [S1]
• Collapse duplicate borders — .btn-group .button:not(:last-child) { border-right: none; } removes the doubled border between adjacent bordered buttons so the group reads as one bar. [S1]
• Direction switch — the same markup becomes a vertical group purely by setting flex-direction: column; on the container. [S1]

📖 세부 내용 (Details)

CSS Horizontal Button Group [S1] To create a group of buttons, wrap the buttons in a <div> element, and add display: flex; to the <div> element. Also add flex-wrap: wrap;, to let the buttons wrap on a new line on small screens:

.btn-group {
  display: flex;
  flex-wrap: wrap;
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}

.btn-group .button:hover {
  background-color: dodgerblue;
}

CSS Bordered Button Group [S1] Use the border property to create a bordered button group:

.button {
  border: 1px solid green;
}

.btn-group .button:not(:last-child) {
  border-right: none;
}

CSS Vertical Button Group [S1] To create a vertical button group, wrap the buttons in a <div> element, and add display: flex; to the <div> element. Also add flex-direction: column;, to let the buttons be displayed in a vertical way:

.btn-group {
  display: flex;
  flex-direction: column;
}

CSS Animated Buttons [S1] The source page presents an "CSS Animated Buttons" section with four labelled examples — "Add an arrow on hover", "Add a 'pressed' effect on click", "Fade in on hover", and "Add a 'ripple' effect on click". The CSS source for these four examples is only offered behind "Try it Yourself" interactive links and is not present as text on the page.

Code for the four animated-button examples: Not found in source.

🛠️ 적용 사례 (Applied in summary)

The page's own examples are the applied cases: a horizontal .btn-group of .button elements, a bordered variant collapsing the shared border, and a vertical variant. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Horizontal group container (language: CSS):

.btn-group {
  display: flex;
  flex-wrap: wrap;
}

Vertical group container (language: CSS):

.btn-group {
  display: flex;
  flex-direction: column;
}

Collapse the inner border (language: CSS):

.btn-group .button:not(:last-child) {
  border-right: none;
}

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Buttons, CSS Flexbox, CSS Borders, CSS Pagination
• 참조 맥락: Referenced when grouping related actions (toolbars, segmented controls) into a single visual unit.

📚 출처 (Sources)

• [S1] W3Schools — CSS Button Groups — https://www.w3schools.com/css/css3_buttons_groups.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Button Groups" page (Astra wiki-curation, P-Reinforce v3.1 format).