Thumbnail boutons social

Modifier l'apparence des boutons de partage des réseaux sociaux

E-monsite propose un plugin pour pouvoir partager directement vos articles sur les réseaux sociaux. Cependant un seul style existe. Comment changer l'apparence de ces boutons de partage ? Voici l'astuce CSS par EMS Tricks.

Configuration via le manager

Depuis votre manager, dans l'onglet "Plugins" vous pouvez choisir entre plusieurs apparences pour les boutons de partage social. EMS Tricks a choisi d'optimiser cette astuce pour une configuration horizontal, c'est à dire dans la liste de style soit "Boutons sans compteurs" ou "Boutons avec compteurs horizontaux".

Plugin reseaux sociaux ems tricks

Facebook, Twitter & Google +

Dans un premier temps, nous avons choisi de ne personnaliser que Facebook, Twitter et Google Plus qui sont les plus utilisés en terme de partage social. Bien sûr, si vous voulez voir apparaitre d'autres boutons de la liste du plugin, n'hésitez pas nous laisser un commentaire ou à nous envoyer un message ici. :)

Nous allons vous proposer plusieurs styles différents, à vous de choisir votre préféré ! C'est parti !

Bords arrondis et fonds blancs

Trucs et astuces pour partage sociale e-monsite

Ce style de bouton est le même qui est utilisé sur EMS Tricks. Voici le code CSS à coller dans les zones appropriés :

/*Permet de supprimer les noms des réseaux*/
.pw-button-text {
    display: none !important;
}

.pw-button__outer {
    border-radius:50px; /*Arrondis les bords*/
    padding-right: 5px !important;
    background: #fff !important;
    transition: all 0.4s;
}

.pw-button__outer:hover {
    transition: all 0.4s;
}

/*Facebook*/
.pw-button-facebook .pw-button__outer {
    border: 2px solid #395a97;
    color: #395a97 !important;
    transition: all 0.4s;
}

.pw-button-facebook .pw-button__outer:hover {
    background: #395a97 !important;
    color: #fff !important;
}

/*Twitter*/
.pw-button-twitter .pw-button__outer {
    border: 2px solid #55aeeb;
    color: #55aeeb !important;
}

.pw-button-twitter .pw-button__outer:hover {
    background: #55aeeb !important;
    color: #fff !important;
}

/*Google Plus*/
.pw-button-googleplus .pw-button__outer {
    border: 2px solid #cc3a2c;
    color: #cc3a2c !important;
}

.pw-button-googleplus .pw-button__outer:hover {
    background: #cc3a2c !important;
    color: #fff !important;
}

Bords carrés et fonds blancs

Trucs et astuces pour partage sociale carrés e-monsite

Le code est quasiment le même à l'exception de l'arrondissement des bords :

/*Permet de supprimer les noms des réseaux*/
.pw-button-text {
    display: none !important;
}

.pw-button__outer {
    padding-right: 5px !important;
    background: #fff !important;
    transition: all 0.4s;
}

.pw-button__outer:hover {
    transition: all 0.4s;
}

/*Facebook*/
.pw-button-facebook .pw-button__outer {
    border: 2px solid #395a97;
    color: #395a97 !important;
    transition: all 0.4s;
}

.pw-button-facebook .pw-button__outer:hover {
    background: #395a97 !important;
    color: #fff !important;
}

/*Twitter*/
.pw-button-twitter .pw-button__outer {
    border: 2px solid #55aeeb;
    color: #55aeeb !important;
}

.pw-button-twitter .pw-button__outer:hover {
    background: #55aeeb !important;
    color: #fff !important;
}

/*Google Plus*/
.pw-button-googleplus .pw-button__outer {
    border: 2px solid #cc3a2c;
    color: #cc3a2c !important;
}

.pw-button-googleplus .pw-button__outer:hover {
    background: #cc3a2c !important;
    color: #fff !important;
}

Bords arrondis et fonds de couleurs

Trucs et astuces pour partage sociale arrondis et fond plein e-monsite

Ici, vous l'aurez compris, l'astuce est d'inverser le code pour que le fond soit de couleur et qu'au passage de la souris le fond devienne blanc. On reprend donc le même code que le premier style en modifiant un peu les propriétés :

/*Permet de supprimer les noms des réseaux*/
.pw-button-text {
    display: none !important;
}

.pw-button__outer {
    border-radius: 50px; /*Arrondis les bords*/
    padding-right: 5px !important;
    transition: all 0.4s;
}

.pw-button__outer:hover {
    transition: all 0.4s;
}

/*Facebook*/
.pw-button-facebook .pw-button__outer {
    border: 2px solid #395a97;
    transition: all 0.4s;
}

.pw-button-facebook .pw-button__outer:hover {
    background: #fff !important;
    color: #395a97 !important;
}

/*Twitter*/
.pw-button-twitter .pw-button__outer {
    border: 2px solid #55aeeb;
}

.pw-button-twitter .pw-button__outer:hover {
    background: #fff !important;
    color: #55aeeb !important;
}

/*Google Plus*/
.pw-button-googleplus .pw-button__outer {
    border: 2px solid #cc3a2c;
}

.pw-button-googleplus .pw-button__outer:hover {
    background: #fff !important;
    color: #cc3a2c !important;
}

Bords carrés et fonds de couleurs

Trucs et astuces pour partage sociale carrés et fond plein e-monsite

Comme pour avant, le code est sensiblement le même. On enlève simplement la propriété qui arrondie les bords :

/*Permet de supprimer les noms des réseaux*/
.pw-button-text {
    display: none !important;
}

.pw-button__outer {
    padding-right: 5px !important;
    transition: all 0.4s;
}

.pw-button__outer:hover {
    transition: all 0.4s;
}

/*Facebook*/
.pw-button-facebook .pw-button__outer {
    border: 2px solid #395a97;
    transition: all 0.4s;
}

.pw-button-facebook .pw-button__outer:hover {
    background: #fff !important;
    color: #395a97 !important;
}

/*Twitter*/
.pw-button-twitter .pw-button__outer {
    border: 2px solid #55aeeb;
}

.pw-button-twitter .pw-button__outer:hover {
    background: #fff !important;
    color: #55aeeb !important;
}

/*Google Plus*/
.pw-button-googleplus .pw-button__outer {
    border: 2px solid #cc3a2c;
}

.pw-button-googleplus .pw-button__outer:hover {
    background: #fff !important;
    color: #cc3a2c !important;
}

Envie d'autres astuces ?

N'hésitez pas à nous demander d'autres trucs et astuces pour e-monsite, ou envoyez nous vos sites avec les tricks en action pour que l'on puisse les mettre en avant !

css webdesign réseaux sociaux partage apparence

Commentaires

  • Kilou
    Merci pour ce tutoriel. Comment faire pour supprimer le fond blanc qui reste autour de ces boutons de partage ?
  • Danièle
    Super ! Merci