La création de boutons de liens de partage (Facebook, Twitter, Google+, ...)

Présentation

- D'abord les services effectifs puis les boutons seuls

Je vous propose 23 sites, au

 

Services effectifs

Add This

L'affichage par défaut

S'affiche, comme ci-dessus, en pleine page. On ne peut pas ne pas le voir mais c'est le style de prise de main, qui quand je suis visiteur, me fait m'enfuir.

La boite

Voir à droite de cette page

Les autres affichages

Il est possible d'afficher le service sous forme de boutons, comme ci-dessous...

... mais aussi sous forme de toolbar pour mobile.

=> Vous avez des statistiques liées à ce service

Références

Add This

Add To Any

Les boutons

Les autres affichages

Il existe plus de 40 propositions d'affichage sur cette page : affichages

Références

Add This

Share This

Les boutons

Les boutons 2

Sur le côté

Voir à gauche de cette page

Existe aussi en ajout sur la barre en haut et sur la barre en bas.

Références

Share This

Surlapage.fr

Les boutons

Voir en bas de cette page
Existe aussi en ajout en haut, à gauche et à droite.

Références

Surlapage.fr

 

Boutons seuls

Abdelrhman Said

Caractéristiques

  • CSS pur
  • Au survol le bouton prend la couleur du service et une info-bulle, de la même couleur, semble en sortir
  • Beau travail
  • Le Caire, Égypte

Image cliquable pour voir l'exemple

menu d'icones sociaux avec info-bulle

Références

Site web

[Créé / modifié] [27-04-2022 / 27-04-2022]

Babb Mike

Caractéristiques

  • CSS, JS
  • Au survol le bouton se déplie vers la droite dans une belle transition
  • Belle simplicité
  • Bristol, Grande Bretagne

Image cliquable pour voir l'exemple

icones sociaux dans un menu fixe a gauche

Références

Site web

Site de l'auteur

[Créé / modifié] [27-04-2022 / 27-04-2022]

Basmadji Fares Marek

Caractéristiques

  • CSS, JS, Anime.js
  • Animation: Au clic les icônes sont éjectés en même temps sur un seul emplacement juste au dessus de l'icône de démarrage. Dans un second temps ils sont expulsés vers la droite en mode glissant
  • Pas de rollover
  • Londres

Image cliquable pour voir l'exemple

icones pour reseaux sociaux avec deux animations

Références

Site web

Site de l'auteur

[Créé / modifié] [21-02-2022 / 21-02-2022]

Dewar Kevin

Caractéristiques

  • CSS, Normalize.css
  • Au survol d'un icône, celui-ci prend la couleur du service et un halo, de même couleur, l'éclaire par derrière
  • Edimbourg, Écosse

Image cliquable pour voir l'exemple

icones avec halo pour reseaux sociaux

Références

Site web

Site de l'auteur

[Créé / modifié] [10-05-2022 / 10-05-2022]

Gajjar Miten

Caractéristiques

  • CSS, JS, Feather.js
  • Animation: Les icônes sont derrière un rebord transparent
  • Lorsque l'on survole l'un d'entre eux, il passse devant
  • La taille des icônes est facilement modifiable
  • Très jolie et très délicate proposition
  • Surat, Gujarat, Inde

Image cliquable pour voir l'exemple

icones delicats pour reseaux sociaux

Références

Site web

[Créé / modifié] [21-02-2022 / 21-02-2022]

Geoghegan Bill

Caractéristiques

  • CSS pur
  • Animation: Au survol les icônes des différents réseaux sont éjectés, de manière roulante, vers la droite
  • Pas de rollover
  • Dublin, Irlande

Image cliquable pour voir l'exemple

icones delicats pour reseaux sociaux

Références

Site web

[Créé / modifié] [21-02-2022 / 21-02-2022]

Gupta Krishna

Caractéristiques

  • CSS pur
  • Animation: Icônes lumineuses, effet néon
  • Si vous avez besoin de mettre au premier plan vos liens vers les réeseaux sociaux voilà ce qu'il vous faut

Image cliquable pour voir l'exemple

icones pour reseaux sociaux

Références

Site web

[Créé / modifié] [21-02-2022 / 21-02-2022]

Kunaal, Modern Web

- Tuto, via Dev.to

Caractéristiques

  • CSS, JS
  • Nécessite la police 'FontAwesome'
  • Le tuto est sur la chaîne Youtube de l'auteur
  • Aucun rollover
  • Delhi, Inde

Image cliquable pour voir l'exemple

icones pour reseaux sociaux avec popover

Références

Site web

Chaîne Youtube

[Créé / modifié] [27-04-2022 / 27-04-2022]

Liang-Shih Lin

- Pas responsive, les bras m'en tombent !

Caractéristiques

  • CSS, Normalize.css, JS
  • Animation: Au survol, le mot 'Contact me' est encadré
  • Animation suite: Au clic les boutons sociaux apparaissent en perspective
  • Animation suite 2: Au survol le bouton social sélectionné se redresse verticalement suivi de son ombre qui devient diffuse
  • Très fort !
  • Taipei City, Taiwan

Image cliquable pour voir l'exemple

icones pour reseaux sociaux en relief et perspective

Références

Site web

[Créé / modifié] [01-03-2022 / 01-03-2022]

Panchal KartiKey

Caractéristiques

  • CSS pur
  • Animation: Au survol le bouton prend de la hauteur et gagne en dimensions puis le couvercle glisse sur la gauche découvrant les icônes au fur et à mesure de son déplacement
  • Ahmedabad, Gujarat, Inde

Image cliquable pour voir l'exemple

icones pour reseaux sociaux avec un bouton qui s'ouvre

Références

Site web

[Créé / modifié] [21-02-2022 / 21-02-2022]

Saud Nour (2)

- Après l'ascenseur, le tiroir social !

Caractéristiques

  • CSS pur
  • Animation: Au survol, le tiroir s'ouvre, les boutons sociaux sortent
  • Pourquoi pas ! !
  • Menlo Park, Californie, USA

Image cliquable pour voir l'exemple

les icones pour reseaux sociaux sortent d'un tiroir

Références

Site web

Site de l'auteur

[Créé / modifié] [01-03-2022 / 01-03-2022]

Singh Himalaya (2)

Caractéristiques

  • CSS pur
  • Animation: Au survol, l'icône s'élève en devenant blanc, pour laisser la place au texte adéquate
  • Joli mouvement du texte pour prendre position
  • Solution élégante
  • Inde

Image cliquable pour voir l'exemple

les icones pour reseaux sociaux en side bar

Références

Site web

[Créé / modifié] [10-05-2022 / 10-05-2022]

Stockin

- Pas responsive

Caractéristiques

  • CSS pur
  • Animation: Au survol le bouton se soulève et l'ombre basse se développe
  • Royaume-Uni

Image cliquable pour voir l'exemple

Au survol le bouton social se souleve

Références

Site web

[Créé / modifié] [18-03-2022 / 18-03-2022]

Stockin (2)

- Très inspiré de Chris Deacy

Caractéristiques

  • CSS pur
  • Animation: Au survol le bouton se gonfle, une vague rempli l'icône de la couleur du logo, ce dernier devient blanc
  • Royaume-Uni

Image cliquable pour voir l'exemple

Au survol le bouton social s'enfle

Références

Site web

[Créé / modifié] [18-03-2022 / 10-05-2022]

Stockin (3)

Caractéristiques

  • CSS pur
  • Animation: Au survol le bouton s'écrase, l'ombre disparaît, l'icône prend la couleur de la marque
  • Royaume-Uni

Image cliquable pour voir l'exemple

Au survol le bouton social s'ecrase et la logo prend la couleur de la marque

Références

Site web

[Créé / modifié] [18-03-2022 / 18-03-2022]

Stutz Vinícius

Caractéristiques

  • CSS, JS, jQuery, Bootstrap
  • Animation: Au survol le bouton tourne sur lui même puis lâche les icônes sociaux vers le haut en mode glissant très rapide
  • Au survol de l'icône social un 'tooltip' avec le nom du réseau s'affiche sur la gauche
  • C'est complet
  • Brésil

Image cliquable pour voir l'exemple

Au survol de l'icone social un tooltip s'affiche

Références

Site web

[Créé / modifié] [21-02-2022 / 21-02-2022]

The Rolf

Caractéristiques

  • The Rolf ou Yann Le Vaguerès
  • CSS pur
  • Animation: Au clic les icônes des différents réseaux sont éjectés, de manière glissante, vers le haut
  • Pas de rollover
  • France

Image cliquable pour voir l'exemple

icones pour reseaux sociaux

Références

Site web

Site de l'auteur

[Créé / modifié] [21-02-2022 / 21-02-2022]

VermeerRob

Caractéristiques

  • CSS, JS
  • Animation: Au survol, le bouton se divise en boutons ronds avec pour chacun le sigle de son réseau social
  • Animation suite: Au survol, le bouton social rond prend la couleur de son réseau
  • Amstelveen, Hollande

Image cliquable pour voir l'exemple

icones pour reseaux sociaux, bouton qui se deploie

Références

Site web

[Créé / modifié] [01-03-2022 / 10-05-2022]

Zouraiz

Caractéristiques

  • CSS pur
  • Animation: Au survol le bouton change de couleur et s'élargit par la droite laissant apparaître le texte associé à l'icône
  • Classique !

Image cliquable pour voir l'exemple

icone social generation d'un texte associe a l'icone

Références

Site web

[Créé / modifié] [21-02-2022 / 21-02-2022]