---
id: howto-css-social-media-buttons
title: "How To - Social Media Buttons"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["facebook twitter icon button CSS"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.79
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["howto", "css", "w3schools", "buttons", "icons", "social"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_social_media_buttons.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Social Media Buttons]]

## 🎯 한 줄 통찰 (One-line insight)
This recipe applies the shared-base-plus-modifier pattern from `[[HOWTO CSS Alert Buttons]]` to icon LINKS instead of buttons — `.fa` handles all shared sizing/padding, while brand-specific classes (`.fa-facebook`, `.fa-twitter`) that Font Awesome ALREADY DEFINES as icon-selector classes are reused here as STYLING hooks too, meaning the same class serves double duty: selecting which glyph renders (Font Awesome's job) AND which background color applies (this recipe's own rule) — no extra custom class is introduced for branding. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`.fa` shared base** — padding, font-size, width, text-align applied once to every social icon link. [S1]
- **Reusing Font Awesome's own icon classes as color hooks** — `.fa-facebook { background: #3B5998; }` piggybacks on the SAME class Font Awesome uses to select the Facebook glyph, rather than introducing a separate custom class. [S1]
- **Square vs. round variant** — identical `.fa` rules plus `border-radius: 50%` (and a reduced `width`) converts the square icon buttons to round ones — same `border-radius` spectrum concept already seen in `[[HOWTO CSS Round Buttons]]`. [S1]
- **`opacity: 0.7` hover** — a lightweight hover effect distinct from the background-color-swap hovers used elsewhere in this cookbook. [S1]

## 📖 세부 내용 (Details)
- `.fa { padding: 20px; font-size: 30px; width: 50px; text-align: center; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; color: white; }`. [S1]
- Round variant: same `.fa` rules, `width: 30px;` and `border-radius: 50%;` added. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.

## 🛠️ 적용 사례 (Applied in summary)
Facebook/Twitter 아이콘 링크를 사각형과 원형 두 가지 스타일로 브랜드 색상과 함께 제시하는 예제가 원문에서 직접 제공됨. [S1]

## 💻 코드 패턴 (Code patterns)
Font Awesome's own icon-selector classes reused as color hooks (CSS):
```css
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
}
.fa:hover { opacity: 0.7; }
.fa-facebook { background: #3B5998; color: white; }
.fa-twitter { background: #55ACEE; color: white; }
```

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

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3Schools HOW TO]]
- **관련 개념:** [[HOWTO CSS Round Buttons]], [[HOWTO CSS Icon Buttons]], [[HOWTO CSS Sticky Social Bar]]
- **참조 맥락:** CSS Buttons 섹션.

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

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