HTML ve CSS ile Sosyal Medya Butonları Yapımı
20 Eylül 2024
HTML ve CSS ile Sosyal Medya Butonları Yapımı
Bu yazıda, HTML ve CSS kullanarak sosyal medya butonlarını nasıl yapacağınızı öğreneceksiniz. Web sitelerinde sıklıkla kullanılan bu butonlar, sitenizin sosyal medyada tanıtılmasına ve etkileşimin artırılmasına yardımcı olur.
Sosyal medya butonlarını birçok hazır eklenti kullanarak oluşturabileceğiniz gibi, HTML ve CSS ile hızlıca kendi tasarımınıza uygun bir şekilde de yapabilirsiniz. Bu rehberde Font Awesome simge kütüphanesini kullanarak popüler sosyal medya platformlarına ait butonları nasıl tasarlayabileceğinizi göstereceğim.
Font Awesome CDN Bağlantısı
Butonlarımızın ikonlarını gösterebilmek için Font Awesome simge kütüphanesini kullanacağız. Aşağıdaki CDN bağlantısını HTML dosyanızın <head></head> etiketleri arasına ekleyerek Font Awesome kullanabilirsiniz:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
- youtube
- snapchat
- skype
- android
- dribbble
- vimeo
- tumblr
- vine
- foursquare
- stumbleupon
- flickr
- yahoo
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-google"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-youtube"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-pinterest"></a>
<a href="#" class="fab fa-snapchat-ghost"></a>
<a href="#" class="fab fa-skype"></a>
<a href="#" class="fab fa-android"></a>
<a href="#" class="fab fa-dribbble"></a>
<a href="#" class="fab fa-vimeo"></a>
<a href="#" class="fab fa-tumblr"></a>
<a href="#" class="fab fa-vine"></a>
<a href="#" class="fab fa-foursquare"></a>
<a href="#" class="fab fa-stumbleupon"></a>
<a href="#" class="fab fa-flickr"></a>
<a href="#" class="fab fa-yahoo"></a>
<a href="#" class="fab fa-reddit"></a>
.fab {
padding: 8px;
font-size: 30px;
width: 32px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fab:hover {
opacity: 0.6;
}
.fa-facebook-f {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
.fa-dribbble {
background: #ea4c89;
color: white;
}
.fa-vimeo {
background: #45bbff;
color: white;
}
.fa-tumblr {
background: #2c4762;
color: white;
}
.fa-vine {
background: #00b489;
color: white;
}
.fa-foursquare {
background: #45bbff;
color: white;
}
.fa-stumbleupon {
background: #eb4924;
color: white;
}
.fa-flickr {
background: #f40083;
color: white;
}
.fa-yahoo {
background: #430297;
color: white;
}
.fa-soundcloud {
background: #ff5500;
color: white;
}
.fa-reddit {
background: #ff5700;
color: white;
}
Köşeleri Yuvarlanmış Buton Yapımı
<a href="#" class="icon-thumbnail fab fa-facebook-f"></a>
<a href="#" class="icon-thumbnail fab fa-twitter"></a>
<a href="#" class="icon-thumbnail fab fa-google"></a>
<a href="#" class="icon-thumbnail fab fa-linkedin"></a>
<a href="#" class="icon-thumbnail fab fa-youtube"></a>
<a href="#" class="icon-thumbnail fab fa-instagram"></a>
<a href="#" class="icon-thumbnail fab fa-pinterest"></a>
<a href="#" class="icon-thumbnail fab fa-snapchat-ghost"></a>
<a href="#" class="icon-thumbnail fab fa-skype"></a>
<a href="#" class="icon-thumbnail fab fa-android"></a>
<a href="#" class="icon-thumbnail fab fa-dribbble"></a>
<a href="#" class="icon-thumbnail fab fa-vimeo"></a>
<a href="#" class="icon-thumbnail fab fa-tumblr"></a>
<a href="#" class="icon-thumbnail fab fa-vine"></a>
<a href="#" class="icon-thumbnail fab fa-foursquare"></a>
<a href="#" class="icon-thumbnail fab fa-stumbleupon"></a>
<a href="#" class="icon-thumbnail fab fa-flickr"></a>
<a href="#" class="icon-thumbnail fab fa-yahoo"></a>
<a href="#" class="icon-thumbnail fab fa-reddit"></a>
.fab {
padding: 8px;
font-size: 30px;
width: 32px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fab:hover {
opacity: 0.6;
}
.fa-facebook-f {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
.fa-dribbble {
background: #ea4c89;
color: white;
}
.fa-vimeo {
background: #45bbff;
color: white;
}
.fa-tumblr {
background: #2c4762;
color: white;
}
.fa-vine {
background: #00b489;
color: white;
}
.fa-foursquare {
background: #45bbff;
color: white;
}
.fa-stumbleupon {
background: #eb4924;
color: white;
}
.fa-flickr {
background: #f40083;
color: white;
}
.fa-yahoo {
background: #430297;
color: white;
}
.fa-soundcloud {
background: #ff5500;
color: white;
}
.fa-reddit {
background: #ff5700;
color: white;
}
.icon-thumbnail {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
