Bu yazımda, Html ve Css kullanarak sosyal medya butonlarının nasıl yapıldığını öğreneceğiz. Her geçen gün sosyal medya kullanıcılarının artmasıyla birlikte web sitelerinde bulunan sosyal medya butonları da artık olmazsa olmazlarımız arasındaki yerini aldı.
Sosyal medya butonlarının, sitenizin ziyaretçi sayısını ve ziyaretçinin sitenizdeki etkileşimini arttırmada ne kadar etkili bir araç olduğu tartışılmaz bir gerçek.
Sosyal medya butonları ile ilgili birçok hazır plugin bulunuyor. Bunları kullanmak yerine kendiniz hızlıca kodlayıp tasarımlarınıza yerleştirebilirsiniz. Yapımı gerçekten oldukça basit. Temel düzeyde Html ve Css bilginiz varsa hiç zorlanmayacaksınızdır.
Önemli : Sosyal medya ikonları için Font Awesome Versiyon 5.3.1’i kullanıyorum. Sizde örnekleri kendi bilgisayarınızda uygularken Html sayfanızın <head> </head> etiketleri arasına aşağıdaki CDN linkini eklemeyi unutmayın. Font Awesome hakkında daha fazla bilgi edinmek için tıklayınız.
|
1 2 3 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> |
Aşağıda isimlerini listelediğim tam 19 farklı sosyal medya butonunu yapacağız. Siz hangilerini kullanmak istiyorsanız onlara ait kodları alıp kullanabilirsiniz.
- youtube
- snapchat
- skype
- android
- dribbble
- vimeo
- tumblr
- vine
- foursquare
- stumbleupon
- flickr
- yahoo
Artık kodlarımıza geçebiliriz.
BASİT SOSYAL MEDYA BUTONLARI
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
.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; } |
Görünümü
KÖŞELERİ YUVARLATILMIŞ SOSYAL MEDYA BUTONLARI
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
.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; } |
Görünümü
TAM YUVARLAK SOSYAL MEDYA BUTONLARI
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<a href="#" class="icon-radius fab fa-facebook-f"></a> <a href="#" class="icon-radius fab fa-twitter"></a> <a href="#" class="icon-radius fab fa-google"></a> <a href="#" class="icon-radius fab fa-linkedin"></a> <a href="#" class="icon-radius fab fa-youtube"></a> <a href="#" class="icon-radius fab fa-instagram"></a> <a href="#" class="icon-radius fab fa-pinterest"></a> <a href="#" class="icon-radius fab fa-snapchat-ghost"></a> <a href="#" class="icon-radius fab fa-skype"></a> <a href="#" class="icon-radius fab fa-android"></a> <a href="#" class="icon-radius fab fa-dribbble"></a> <a href="#" class="icon-radius fab fa-vimeo"></a> <a href="#" class="icon-radius fab fa-tumblr"></a> <a href="#" class="icon-radius fab fa-vine"></a> <a href="#" class="icon-radius fab fa-foursquare"></a> <a href="#" class="icon-radius fab fa-stumbleupon"></a> <a href="#" class="icon-radius fab fa-flickr"></a> <a href="#" class="icon-radius fab fa-yahoo"></a> <a href="#" class="icon-radius fab fa-reddit"></a> |
Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
.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-radius { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } |
Görünümü
YAZI VE İKON BİRLİKTE KULLANILAN SOSYAL MEDYA BUTONLARI
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<a href="#" class="icon-text fab fa-facebook-f"> <span> | </span> Facebook</a> <a href="#" class="icon-text fab fa-twitter"><span> | </span> Twitter </a> <a href="#" class="icon-text fab fa-google"><span> | </span> Google </a> <a href="#" class="icon-text fab fa-linkedin"><span> | </span> Linkedin </a> <a href="#" class="icon-text fab fa-youtube"><span> | </span> Youtube </a> <a href="#" class="icon-text fab fa-instagram"><span> | </span>Instagram </a> <a href="#" class="icon-text fab fa-pinterest"><span> | </span> Pinterest </a> <a href="#" class="icon-text fab fa-snapchat-ghost"><span> | </span> Snapchat </a> <a href="#" class="icon-text fab fa-skype"><span> | </span> Skype </a> <a href="#" class="icon-text fab fa-android"><span> | </span> Android </a> <a href="#" class="icon-text fab fa-dribbble"><span> | </span> Dribbble</a> <a href="#" class="icon-text fab fa-vimeo"><span> | </span> Vimeo </a> <a href="#" class="icon-text fab fa-tumblr"><span> | </span> Tumblr </a> <a href="#" class="icon-text fab fa-vine"><span> | </span> Vine </a> <a href="#" class="icon-text fab fa-foursquare"><span> | </span> Foursquare </a> <a href="#" class="icon-text fab fa-stumbleupon"><span> | </span> Stumbleupon </a> <a href="#" class="icon-text fab fa-flickr"><span> | </span> Flickr </a> <a href="#" class="icon-text fab fa-yahoo"><span> | </span> Yahoo </a> <a href="#" class="icon-text fab fa-reddit"><span> | </span> Reddit </a> |
Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
.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-text{ width: 125px; font-size: 16px; } .icon-text span{ margin:4px; } |
Görünümü
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılarda ilginizi çekebilir.
Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)
Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)
Css ile Yatay Açılır Menü Yapımı
Html ve Css ile Animasyonlu Arama Kutusu Yapımı
Yeni bir yazımda görüşmek üzere.
Kardeşim bu kodlar işe yaramıyor.
Kodu doğru bir şekilde kullanamamış olabilir misiniz???