SNS 아이콘 디자인

<div class="social-links">
    <a href="https://www.instagram.com/or_aistudio?igsh=MmxrNGE3OHJsdWkz" target="_blank" class="social-btn">
        <span class="text">INSTA</span>
        <div class="icon-container">
            <img src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" alt="Instagram">
        </div>
    </a>
    <a href="https://www.tiktok.com/@or.aistudiio" target="_blank" class="social-btn">
        <span class="text">TIKTOK</span>
        <div class="icon-container">
            <img src="https://cdn-icons-png.flaticon.com/512/3046/3046122.png" alt="TikTok">
        </div>
    </a>
    <a href="https://www.youtube.com/@or_aistudio" target="_blank" class="social-btn">
        <span class="text">YOUTUBE</span>
        <div class="icon-container">
            <img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="YouTube">
        </div>
    </a>
</div>

<style>
/* 🔹 전체 컨테이너 */
.social-links {
    display: flex;
    justify-content: flex-end; /* 오른쪽 정렬 */
    gap: 2rem; /* 간격 축소 */
    margin-top: 2rem;
    margin-right: 6rem; /* 전체 위치 오른쪽으로 이동 */
}

/* 🔹 개별 버튼 스타일 */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px; /* 버튼 크기 조정 */
    height: 55px;
    font-size: 2.6rem; /* 폰트 크기 증가 */
    font-weight: 800; /* 글씨 더 두껍게 */
    color: rgba(255, 255, 255, 1); /* 완전한 흰색 */
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* 🔹 아이콘 컨테이너 (기본적으로 숨김) */
.icon-container {
    position: absolute;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 🔹 아이콘 이미지 */
.icon-container img {
    width: 28px;
    height: 28px;
}

/* 🔹 호버 시 글자 사라지고 아이콘 등장 */
.social-btn:hover .text {
    opacity: 0;
    transform: translateY(-10px);
}

.social-btn:hover .icon-container {
    opacity: 1;
    transform: scale(1);
}
</style>