Canlı Önizleme
Nasıl Kullanılır?
Gerçek sitenizde '.fab-container' sınıfına 'position: fixed;' ekleyerek sayfanın altında her zaman görünmesini sağlayabilirsiniz.
Kaynak Kodlar
HTML
<div class="fab-container">
<div class="fab-options">
<a href="#" class="fab-opt"><i class="fas fa-edit"></i></a>
<a href="#" class="fab-opt"><i class="fas fa-share"></i></a>
</div>
<button class="fab-btn"><i class="fas fa-plus"></i></button>
</div>CSS
.fab-container { position: absolute; bottom: 30px; right: 30px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.fab-btn { width: 60px; height: 60px; border-radius: 50%; background: #ff4757; color: white; border: none; font-size: 24px; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4); transition: base 0.3s, transform 0.3s; z-index: 10; }
.fab-options { display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; }
.fab-opt { width: 45px; height: 45px; border-radius: 50%; background: #2a2a35; color: white; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.2s; }
.fab-opt:hover { background: #6C5CE7; transform: scale(1.1); }
.fab-container:hover .fab-options { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-container:hover .fab-btn { transform: rotate(45deg); background: #00cec9; }