Jinsi ya Kutengeneza Floating Action Buttons (FAB)

Floating Action Button (FAB) ni button ya interactive inayojitokeza juu ya content, ikisaidia kwa actions za haraka kama chat, contact, au scroll to top. FAB ni modern na user-friendly.

✅ A. Simple FAB (Scroll-to-Top Example)
HTML
<button id="fab" title="Scroll to Top">⬆️</button>

CSS
#fab {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: #0d6efd;
color: #fff;
font-size: 24px;
border: none;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: background 0.3s, transform 0.2s;
z-index: 100;
}

#fab:hover {
background: #0a58ca;
transform: scale(1.1);
}

JavaScript
const fab = document.getElementById('fab');

// Scroll to top on click
fab.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});

// Show/hide FAB based on scroll
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
fab.style.display = 'block';
} else {
fab.style.display = 'none';
}
});

// Initially hidden
fab.style.display = 'none';

✅ B. FAB with Multiple Actions (Speed Dial)
HTML
<div class="fab-container">
<button class="fab-main">+</button>
<div class="fab-options">
<button>Chat</button>
<button>Contact</button>
<button>Help</button>
</div>
</div>

CSS
.fab-container { position: fixed; bottom: 30px; right: 30px; }
.fab-main {
width: 60px; height: 60px; border-radius: 50%; background: #0d6efd;
color: #fff; border: none; font-size: 32px; cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.fab-options {
display: none;
margin-bottom: 10px;
flex-direction: column;
gap: 10px;
}
.fab-options button {
width: 50px; height: 50px; border-radius: 50%;
background: #6c757d; color: #fff; border: none; cursor: pointer;
}
.fab-container.active .fab-options { display: flex; }

JavaScript
const fabMain = document.querySelector('.fab-main');
const fabContainer = document.querySelector('.fab-container');

fabMain.addEventListener('click', () => {
fabContainer.classList.toggle('active');
});

✔️ Code zote zinafanya kazi moja kwa moja
✔️ Inaunda modern UI kwa quick actions

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509