<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobil Alt Menü</title>
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
.api {
position: fixed;
bottom: 0;
right: 0; /* Sağ tarafa doğru hizalama */
z-index: 999;
display: flex;
background: transparent; /* Şeffaf arka plan */
padding: 0; /* Üst ve alt boşluğu kaldır */
}
.api div {
flex: 1;
text-align: center;
}
.api a {
display: flex; /* Flexbox kullanarak içerikleri ortala */
justify-content: center; /* Yatay olarak ortala */
align-items: center; /* Dikey olarak ortala */
width: 100%; /* İkonları yatay olarak uzatmak için genişlik ayarı */
font-size: 24px; /* İkon boyutu */
color: white;
text-decoration: none;
border-radius: 0; /* Kenarları yumuşatmayı kaldır */
margin: 0; /* Hiç boşluk olmaması için margin sıfırlandı */
transition: transform 0.3s; /* Hover efekti için geçiş */
}
.telefon a { background: #337ab7; height: 40px; }
.whatsapp a { background: #4dc247; height: 40px; }
.telegram a { background: #27A7E5; height: 40px; }
.instagram a { background: #fd3a67; height: 40px; }
.tiktok a { background: #69C9E2; height: 40px; }
.linkedin a { background: #0077B5; height: 40px; }
.youtube a { background: #FF0000; height: 40px; }
/* İkon simgelerinin yükseklik ayarları */
.telefon a i { font-size: 30px; } /* Telefon simgesi boyutu */
.whatsapp a i { font-size: 30px; } /* WhatsApp simgesi boyutu */
.telegram a i { font-size: 30px; } /* Telegram simgesi boyutu */
.instagram a i { font-size: 30px; } /* Instagram simgesi boyutu */
.tiktok a i { font-size: 30px; } /* TikTok simgesi boyutu */
.linkedin a i { font-size: 30px; } /* LinkedIn simgesi boyutu */
.youtube a i { font-size: 30px; } /* YouTube simgesi boyutu */
.api a:hover {
transform: scale(1.05); /* Hover efekti */
}
@media (max-width: 768px) {
.api {
display: flex;
}
}
</style>
</head>
<body>
<div class="api">
<div class="telefon">
<a href="tel:900000000000" title="Telefon"><i class="fas fa-phone"></i></a>
</div>
<div class="whatsapp">
<a href="
https://api.whatsapp.com/send?phone=900000000000" target="_blank" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
</div>
<div class="telegram">
<a href="
https://t.me/kullanici_adiniz" target="_blank" title="Telegram"><i class="fab fa-telegram-plane"></i></a>
</div>
<div class="instagram">
<a href="
https://www.instagram.com/?hl=tr" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
</div>
<div class="tiktok">
<a href="
https://www.tiktok.com/@kullanici_adiniz" target="_blank" title="TikTok"><i class="fab fa-tiktok"></i></a>
</div>
<div class="linkedin">
<a href="
https://www.linkedin.com/in/kullanici_adiniz" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
</div>
<div class="youtube">
<a href="
https://www.youtube.com/c/kullanici_adiniz" target="_blank" title="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
</body>
</html>
Hocam sizin verdiğiniz kodlar olmadı bunu yaptım ama bu seferde tiktok LinkedIn ve yotube ikonlarin yükseklikleri diğerlerine göre biraz yukarıda ne yaptıysam hepsini aynı seviyeye getiremedimm
Bu kodlarda hangi değişiklikleri yapmam gerekiyor bir yardımcı olabilir misiniz arkadaşlar
Birde sol taraf doğru yanastirmam lazım .
