Кнопка социальной сети для сайта

<div class="bottom-bar">
<a href="https://wa.me/99361615787" rel="nofollow" target="_blank" aria-label="WhatsApp">
<div class="icon-btn">
 <img src="/Surat/whatsapp.png" alt="WhatsApp" />
</div></a>
<a href="https://t.me/+99361615787" rel="nofollow" target="_blank" aria-label="Telegram">
<div class="icon-btn">
 <img src="/Surat/telegram.png" alt="Telegram" />
</div></a>
<a href="https://www.instagram.com/piriyew_janmyrat" rel="nofollow" target="_blank" aria-label="Instagram">
<div class="icon-btn">
 <img src="/Surat/instagram.png" alt="Instagram" />
</div></a>
<a href="https://www.tiktok.com/@janmyrat.05" rel="nofollow" target="_blank" aria-label="TikTok">
<div class="icon-btn">
 <img src="/Surat/tiktok.png" alt="TikTok" />
</div></a>
</div>

<style>
.bottom-bar {
 position: fixed;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 18px;
 z-index: 9999;
 animation: fadeInUp 0.8s ease;
}

.icon-btn {
 width: 55px;
 height: 55px;
 background: rgba(30, 30, 30, 0.85);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 5px 15px rgba(0,0,0,0.5), inset 0 1px 4px rgba(255,255,255,0.2);
 backdrop-filter: blur(6px);
 transition: all 0.3s ease;
}

/* Иконка всегда отображается в основном цвете */
.icon-btn img {
 width: 28px;
 height: 28px;
 transition: transform 0.3s ease, filter 0.3s ease;
}

/* При наведении становится ярче и увеличивается */
.icon-btn:hover {
 transform: translateY(-5px) scale(1.1);
 box-shadow: 0 0 15px rgba(255,255,255,0.7), 0 0 30px rgba(255,255,255,0.4);
}

.icon-btn:hover img {
 transform: scale(1.2);
 filter: brightness(1.2);
}

@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translate(-50%, 20px);
 }
 to {
 opacity: 1;
 transform: translate(-50%, 0);
 }
}
</style>