Hover efektli sosyal medya simgeleri
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<style>
.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f8f9fa;
color: #333;
font-size: 20px;
text-decoration: none;
transition: all 0.3s ease;
cursor:pointer;
}
.social-icon:hover {
transform: translateY(-5px);
}
.facebook:hover {
background-color: #3b5998;
color: white;
}
.twitter:hover {
background-color: #1da1f2;
color: white;
}
.instagram:hover {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
color: white;
}
.linkedin:hover {
background-color: #0077b5;
color: white;
}
</style>
<div class="social-icons">
<a class="social-icon facebook"><i class="bi bi-facebook"></i></a>
<a class="social-icon twitter"><i class="bi bi-twitter"></i></a>
<a class="social-icon instagram"><i class="bi bi-instagram"></i></a>
<a class="social-icon linkedin"><i class="bi bi-linkedin"></i></a>
</div><head> bölümüne CSS kodlarını ekleyin</body> etiketinden önce ekleyin