18 Adet Ücretsiz HTML CSS3 Sosyal Medya Düğmeleri ve Simgeleri

Google'ın sosyal sinyallere önem vermesinden dolayı, makalelerin sosyal olarak paylaşılması, web sitesi sayfalarının bugünlerde marka başarısı için çok önemli hale geldi. Geleneksel png görüntü dosyalarına ve hatta sprite'lara kıyasla sitenizi yükleme hızını hızlandıran simgeler olan css3 sosyal medya düğmelerini kullanın. Modern SEO, özellikle trafik Facebook, Google vb. Olduğunda dönüşümünüzü artıran bir makaleye yeterince sosyal paylaşım aşkı bulmakla ilgilidir.

Basit düğmeler varsa, simgeler ilginizi çekiyorsa, web sitenizde ücretsiz olarak kullanabileceğiniz bu css sosyal medya simgelerini, düğmeleri ve şeritleri kontrol edin. Metin kodunu, sosyal yer imi web sitesinin ihtiyacına göre değiştirerek halkın kullanması için kullanabilirsiniz. Yakında bu konuyu yeni içerikle güncelleyeceğim, bu yüzden buna bağlı kal. Aşağıdaki içeriğin bir kısmı standart css, html kodu ile birlikte jquery bağımlıdır. Bu yumuşak snippet'leri bootstrap web sitelerinize de entegre ederek eğlenin.

Ayrıca paylaşma simgelerinize daha fazla stil eklemek için kullanılabilecek yumuşak vurgulu efektli son css düğmelerine de bir göz atın.

Zaten yüklü yazı tipi müthiş? Sonra bu yeni css stilleri animasyon efektlerinize ekleyebilir. Efektler, zoom ve dönen bir animasyonla aslında çok basittir. Temel sosyal medya simge setiniz olarak harika bir yazı tipine sahip olduğunuzu bildiğiniz gibi web sitenizde arayabileceğiniz çok büyük bir ikon koleksiyonu olacaktır.

Bu yazı tipi harika tarz Simge şüphesiz web sitenize mükemmel müşteri tabanı çekmek için harika bir görünüm sağlar. Yakınlaştırma ve döndürme muhteşem bir efekt ancak yuvarlak ve düz sosyal simgeler de çok beğeniliyor.

Demo Download

Sosyal simge animasyonu

Simge vurgusunda düz bir kayan animasyon ile mutlak bir efekt. Css'i indirmek ücretsizdir ve kendi kişisel efektinizi oluşturmak için farklı şeyler deneyebilirsiniz. Sadece sosyal simgeler için değil, bu animasyon efekti web sitesinin birçok bölümünü canlandırmanıza yardımcı olabilir.

Sosyal simge animasyonu, projenizde sadece tek bir amaç için kullanılmayan en iyilerinden biri olarak söylenebilir, bir web sitesi sahibi olarak, onu sosyal medya simgeleri olarak kullanmaktan çok daha fazlasını yapabilirsiniz.

Demo Download

Şık Sosyal Düğmeler

Css snippet en iyi sosyal medya simge koleksiyonunun pürüzsüz bir koleksiyon. Sadece simge stilini değil, aynı zamanda temiz bir etkileşim hissi veren simgelerdeki vurguyu da seveceksiniz. Bu sosyal simge seti çok temiz ve zekice siteye modern ve şık bir görünüm getiriyor. Basit tasarımı sevecek kişiyseniz, sizin için simgedir.

DemoDownload

Sosyal Düğme Koleksiyonu

Mevcut websiteniz koduna kolayca eklenebilecek farklı şekil ve boyutlarda çekici sosyal medya butonları css içerisine dahil edilir. Buradaki sosyal düğmeler kare, yuvarlak ve diğer tüm şekillerde mevcuttur, bu nedenle bir web sitesi sahibi olarak web sitenizin gereksinimlerine en uygun olanı seçebilirsiniz. Simgeler temiz ve basit görünüyor.

Demo  Download

Css3 içinde saf sosyal düğmeler

Modern sosyal simgelerin yatay ekranlı yuvarlanma etkisi aklınızı başınızdan alacak. Bu CSS3 sosyal düğmeleri, harika bir efektle kullanılabilecek en iyilerden biri. Herhangi bir düğmenin üzerine geldiğinizde, simge şaşırtıcı görünecek şekilde yuvarlanmaya başlayacak ve şüphesiz her ziyaretçinin dikkatini çekecektir.

Demo | Download

Fantezi Düğmeler

İçeriğinizi paylaşmak veya web sitesini kendi zaman çizelgelerinde yer imlerine eklemek için web sitesi ziyaretçilerine başka bir görsel muamele. Bu sosyal simge, adından da anlaşılacağı gibi çok süslü ve burada da sosyal simge düğmeleri üzerlerine geldikçe dönmeye başlar. Deniz yeşili arka plan renginde beyaz renk düğmeleri göz alıcı bir görünüm oluşturur.

Demo | Download

Hover Fancy

Bu sefer bir metin ekranı ile biten farklı bir vurgulu stili bulacaksınız. Evet, fare herhangi bir düğmenin üzerine getirildiğinde, sosyal medyanın adını gösterecektir. Örneğin, fareyi Twitter sosyal simge düğmesine getirdiğinizde, "Twitter" metnini görüntüler. Böylece, herhangi bir sosyal ikonun farkında olmayanlar, o butona tıklandığında sosyal ikonun adı gösterilir.

Demo | Download

Seksi Sosyal Düğmeler

Vurgulu renk efekti, en iyi sosyal ağ web sitelerinin orijinal rengini gösterecektir. Etkisi oldukça ilginç. Başlangıçta sosyal ikon düğmeleri, ikonları orijinal renkleriyle beyaz bir dairede sunulur. Ancak üzerlerine geldiğinizde renk değişecek, bu da beyaz renkli simgeyle birlikte toplumsal simge renginin oluşacağı daire.

Demo | Download

Sosyal Düğmeler Slayt

Dikey slayt animasyonu ile blogunuzda görülebilen dört ana sosyal medya ağı. Snippet ayrıca sayfanızın veya paylaşılan bağlantınızın sosyal sayaç istatistiklerini gösterir. Simge başlangıçta çekici görünmese de, üzerlerine fareyle gezdirmek, simgenin orijinal rengini de beraberinde getirerek inanılmaz bir animasyon efekti getirir. Bu sosyal ikon düğmeleri, istenen görünümü elde etmek için her türlü projede kullanılabilir.

Demo | Download

Sosyal Altbilgi

Sayfanın alt kısmında kullanılabilecek uzun gölgeli Sosyal Altbilgi. Gölge efekti olan bir şey arıyorsanız, gidilecek olan budur. Sosyal simge düğmeleri çok basit görünüyor, ancak web sitenizin görünümünü değiştirmek için harika bir modern görünüme sahip.

Demo | Download

Sosyal Bölüm

Güzel vurgulu etkisi ile sosyal simgeler kümesi. Yakınlaştırma efekti vardır. Fare üzerindeyken simgeler büyür ve biraz sağa veya sola kaydırırlar. Sonuç olarak, etki akıllara durgunluk veriyor ve web sitenizde daha az yer kaplıyor, böylece projenize dahil etmek için her zaman bu grubu kontrol edebilirsiniz.

Demo | Download

sosyal paylaşım

Üç popüler ağ Google, Facebook, Twitter ile belirlenen bir sosyal paylaşım simgesi. Küçük bir simge seti arıyorsunuz ve bu sizin için mükemmel. Özel simge düğmelerinin rengi üzerlerine geldikçe biraz değişir. Görünüm çok basit ve çekici.

Demo | Download

Sosyal ağlar

Temiz simgelerle sabit sosyal yer imi web sitelerinin bir üst çubuğu. Hemen hemen tüm gerekli sosyal ağ düğmeleri bu sette bulunmaktadır. Renk kombinasyonu oldukça ilginç, sarı ve siyah ancak üzerlerine gelindiğinde renk orijinal renklerine dönüştü.

Demo | Download

 Dairesel Sosyal Simgeler

Tüm görkemiyle twitter gösteren Google, Facebook'u gösteren üç simge. Simgeler fareyle üzerlerinde dönmeye başlar, ancak en ilginç şey fareyi herhangi bir simgenin üzerine getirdikten sonradır, eğer bir sonraki simgeye gelinirseniz, her iki simge de birlikte dönmeye başlar. Gerçekten göz alıcı görünüyor.

Source | Download

Düğmeleri Paylaş

Bir dizi sosyal medya, düğmeleri tıklatmanızı sağlayan 3D efektli düğmeleri paylaşıyor! Bu set, projenizde, tüm sosyal paylaşım düğmelerinin ziyaretçilerin gözüne hitap eden inanılmaz bir 3D efekti ile bütünleştirildiği yerlerde kullanmak için çok kullanışlıdır.

Demo | Source

Renk Değişen Sosyal Çubuk

Herhangi bir sosyal ağ simgesinin üzerine gelindiğinde, arka plan bölümü ağa benzer renk değiştirir. Yani eğer f butonuna basarsanız, arka plan maviye dönüşürken, Pinterest durumunda kırmızı olur.

Demo | Download

CSS3'te Düz Sosyal Düğmeler

Web sitenizin kenar çubuğuna uyması için paylaşım düğmelerinin uzun bir sürümü. Bu düğmeleri web sitesinin herhangi bir yerinde kullanabilirsiniz ve harika görünecektir.

Source

CSS Sosyal Şeritleri

Basit ama şık CSS Sosyal Şeritler. Adından da anlaşılacağı gibi, sosyal paylaşım butonu kurdelelere çok benziyor, ancak ikonlar kesinlikle harika görünüyor.

Source

Sosyal Gezinme

Dikey stilde bir gezinme. Tüm sosyal medya simgelerinin dikey olarak yerleştirildiği tasarım çok benzersiz. Projenizde bu simge kümesini ücretsiz kullanabilirsiniz ve sitede modern bir görünüm yaratacaktır.

Source

Css animasyonları ile oynamak için daha fazla ilham kaynağına mı ihtiyacınız var? Ayrılmadan önce bu pürüzsüz efektleri deneyin...