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>

facebook
twitter
google
linkedin
youtube
instagram
pinterest
snapchat
skype
android
dribbble
vimeo
tumblr
vine
foursquare
stumbleupon
flickr
yahoo
reddit

<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;
}

Eren Sarıgül

Çocukluğumda atari oyunlarıyla başladığım teknoloji merakım, zamanla beni yazılım dünyasına yönlendirdi. Birçok projede yer aldım, yarışmalara katıldım ve her fırsatta yeni şeyler öğrenmeye çalıştım. Yazılım, bilişim, grafik tasarım ve e-ticaret gibi farklı alanlarda projeler geliştirdim. Alanımda ve dışında her türlü teknolojik işe meraklıyım, her yeni proje benim için yeni bir öğrenme fırsatıdır. Yazılım dünyasında her zaman keşfedilecek yeni bir şey olduğuna inanarak yoluma devam ediyorum.

HTML ve CSS ile Sosyal Medya Butonları Yapımı