diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 752823b7715..1cd2341ae59 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -31,6 +31,13 @@ $o-user-color-palette: () !default;
 // palette.
 $o-user-theme-color-palette: () !default;
 
+$o-social-colors: (
+    'facebook': #3B5999,
+    'twitter': #55ACEE,
+    'linkedin': #0077B5,
+    'google-plus': #DD4B39,
+);
+
 //------------------------------------------------------------------------------
 // Fonts
 //------------------------------------------------------------------------------
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 09946969873..eb350d658ce 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1066,3 +1066,7 @@ table.table_desc tr td {
         background-color: rgba($value, 0.1);
     }
 }
+
+@each $media, $color in $o-social-colors {
+    @include text-emphasis-variant(".text-#{$media}", $color);
+}
diff --git a/addons/website/static/src/xml/website.share.xml b/addons/website/static/src/xml/website.share.xml
index d78c1babc46..f07a2907492 100644
--- a/addons/website/static/src/xml/website.share.xml
+++ b/addons/website/static/src/xml/website.share.xml
@@ -1,15 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="website.social_hover">
-        <div class="row clearfix" style='font-size:16px'>
-            <div class="col-12 css_editable_mode_hidden">
-                <t t-foreach="medias" t-as="media">
-                    <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}" t-att-aria-label="media" t-att-title="media">
-                        <span class="fa fa-square fa-stack-2x"></span>
-                        <span t-attf-class="oe_social_#{media} fa fa-#{media} fa-stack-1x fa-inverse"></span>
-                    </a>
-                </t>
-            </div>
+        <div class="text-nowrap css_editable_mode_hidden">
+            <t t-foreach="medias" t-as="media">
+                <a href="#"
+                    t-attf-class="fa fa-3x fa-#{media}-square text-#{media} oe_social_#{media}"
+                    t-att-title="media"
+                    t-att-aria-label="media"/>
+            </t>
         </div>
     </t>
 </templates>