diff --git a/css/style.css b/css/style.css
index 4145e67..a32f181 100644
--- a/css/style.css
+++ b/css/style.css
@@ -169,9 +169,12 @@ a.list-group-item:hover {
 	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
 	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
 }
+
 .btn:active {
 	box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
 
+}
+
 /* ------------------ BREADCRUMB ------------------- */
 
 .breadcrumb {
@@ -180,7 +183,7 @@ a.list-group-item:hover {
 
 /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
 
-.partager {
+.share-buttons {
   margin:15px;
 }
 
diff --git a/index.html b/index.html
index 8e93d2a..1c7184e 100644
--- a/index.html
+++ b/index.html
@@ -120,12 +120,13 @@ In id suscipit elit.</code></pre>
 </div>
 </section>
 
-<section class="partager" style="text-align:right;">
-  <a href="#" class="btn btn-blue"><i class="fa fa-facebook fa"></i></a>
-  <a href="#" class="btn btn-info"><i class="fa fa-twitter"></i></a>
-  <a href="#" class="btn btn-danger"><i class="fa fa-google-plus"></i></a>
-  <a href="#" class="btn btn-dark"><i class="fa fa-asterisk"></i></a>
-  <a href="#" class="btn btn-default"><i class="fa fa-envelope"></i></a>
+<section class="share-buttons align-right">
+  <a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
+  <a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
+  <a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
+  <a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
+  <a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
+  <a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
 </section>