전체 CSS 코드 (4종 SNS 스타일)

✅ 🎨 SNS별 스타일 클래스 구성

SNS클래스 이름주요 색상

YouTube	.btn-youtube	빨강 (#FF0000)
Instagram	.btn-instagram	그라데이션 (#f09433 → #bc1888)
Twitter	.btn-twitter	파랑 (#1DA1F2)
TikTok	.btn-tiktok	검정+네온 (#000 → #69C9D0, #EE1D52)

 

---

✅ 공통 구조 (공통 클래스를 반드시 포함)

모든 버튼에 button-base를 붙이고, SNS별 색상 테마만 btn-xxx 클래스로 추가하면 돼.

---

✅ 전체 CSS 코드 (4종 SNS 스타일)

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

/* 공통 버튼 스타일 */
a.button-base {
    display: inline-block;
    padding: 16px 36px;
    margin: 20px auto;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff !important;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: 0.4s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* 유튜브 (빨강) */
a.btn-youtube {
    background: linear-gradient(90deg, #ff0000, #cc0000);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}
a.btn-youtube:hover {
    background: linear-gradient(90deg, #cc0000, #ff0000);
}

/* 인스타그램 (그라데이션) */
a.btn-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    box-shadow: 0 0 20px rgba(252, 92, 125, 0.4);
}
a.btn-instagram:hover {
    filter: brightness(1.1);
}

/* 트위터 (파랑) */
a.btn-twitter {
    background: linear-gradient(90deg, #1DA1F2, #0d8ddb);
    box-shadow: 0 0 20px rgba(29, 161, 242, 0.4);
}
a.btn-twitter:hover {
    background: linear-gradient(90deg, #0d8ddb, #1DA1F2);
}

/* 틱톡 (검정+네온) */
a.btn-tiktok {
    background: linear-gradient(135deg, #000000, #111111);
    box-shadow: 0 0 25px rgba(238, 29, 82, 0.5), 0 0 10px rgba(105, 201, 208, 0.5);
    color: #ffffff !important;
}
a.btn-tiktok:hover {
    background: linear-gradient(135deg, #1c1c1c, #000000);
}

✅ 사용 예시 (글쓰기 HTML)

▶ 유튜브

html

복사편집

<a href="https://youtube.com" class="button-base btn-youtube" target="_blank"> ▶ 유튜브에서 보기 </a>

📸 인스타그램

html

복사편집

<a href="https://instagram.com" class="button-base btn-instagram" target="_blank"> 📸 인스타그램에서 보기 </a>

🐦 트위터

html

복사편집

<a href="https://twitter.com" class="button-base btn-twitter" target="_blank"> 🐦 트윗 보기 </a>

🎵 틱톡

html

복사편집

<a href="https://www.tiktok.com" class="button-base btn-tiktok" target="_blank"> 🎵 틱톡에서 보기 </a>

---