chatgpt çıktısı;
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Sosyal Medya Butonları</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
.social-bar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 9999;
}
.social-bar a {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
color: #fff;
background: #333;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
transition: 0.3s;
}
.social-bar a:hover {
background: #555;
}
.social-bar a.facebook { background: #1877F2; }
.social-bar a.instagram { background: #E4405F; }
.social-bar a.twitter { background: #1DA1F2; }
.social-bar a.youtube { background: #FF0000; }
</style>
</head>
<body>
<div class="social-bar">
<a href="https://facebook.com" target="_blank" class="facebook"><i class="fab fa-facebook-f"></i></a>
<a href="https://instagram.com" target="_blank" class="instagram"><i class="fab fa-instagram"></i></a>
<a href="https://twitter.com" target="_blank" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="https://youtube.com" target="_blank" class="youtube"><i class="fab fa-youtube"></i></a>
</div>
</body>
</html>
Sağolun hocam az daha geliştirdim güzel bir sosyal medya butonu yaptım