فلوتینگ بار متریال دیزاین کد HTML CSS

<!-- Font Awesome (اگر قبلا لود نشده) -->
<!-- Designed by Shareplus.ir -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- HTML -->
<div class="floating-toolbar">
<a href="https://t.me/shareplus_ir" class="telegram" target="_blank" title="تلگرام"><i class="fab fa-telegram-plane"></i></a>
<a href="https://instagram.com/shareplus_ir" class="instagram" target="_blank" title="اینستاگرام"><i class="fab fa-instagram"></i></a>
<a href="https://wa.me/989361574427" class="whatsapp" target="_blank" title="واتساپ"><i class="fab fa-whatsapp"></i></a>
<a href="https://Shareplus.ir" class="website" target="_blank" title="وبسایت"><i class="fas fa-globe"></i></a>
<a href="tel:09361574427" class="phone" title="تماس تلفنی"><i class="fas fa-phone-alt"></i></a>
<a href="sms:09361574427" class="sms" title="پیامک"><i class="fas fa-sms"></i></a>
<a href="https://www.aparat.com/shareplus.ir" class="camera" title="آپارات"><i class="fas fa-camera"></i></a>
</div>

<!-- CSS -->
<style>
.floating-toolbar {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
background: #fff;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
padding: 15px 18px;
display: flex;
flex-direction: column;
gap: 20px;
z-index: 9999;
}

.floating-toolbar a {
font-size: 24px;
color: #444;
transition: color 0.2s ease, transform 0.2s ease;
}

.floating-toolbar a:hover {
transform: scale(1.15);
}

/* رنگ‌ها در هاور */
.floating-toolbar a.telegram:hover { color: #0088cc; }
.floating-toolbar a.instagram:hover { color: #e1306c; }
.floating-toolbar a.whatsapp:hover { color: #25d366; }
.floating-toolbar a.website:hover { color: #ff9800; }
.floating-toolbar a.phone:hover { color: #4caf50; }
.floating-toolbar a.sms:hover { color: #9c27b0; }
.floating-toolbar a.camera:hover { color: #3f51b5; }

/* موبایل */
@media (max-width: 768px) {
.floating-toolbar {
right: 10px;
padding: 10px 14px;
gap: 16px;
}
.floating-toolbar a {
font-size: 20px;
}
}
</style>