+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + Social Media Icon Styles in Website +
++ Social Media Icon Styles in Website -Facebook, Twitter, + LinkedIn, WhatsApp, Email, Pinterest, Reddit, Hacker News +
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ This module helps to share the product on social media like Facebook,
+ Twitter, LinkedIn, WhatsApp, email, Pinterest, Reddit or Hacker News,
+ Also
+ provide 10+ styles for social media sharing.
+ User can enable/disable these social media platforms from the settings.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ User Can Enable/Disable Social Media Platforms.
+
+
+ User Can Enable/Disable Social Media Platforms.
+
+
+ 10+ Styles for Social Media Sharing.
+
+
+
+ 10+ Styles for Social Media Sharing.
+
+
+
+ Attractive and Easy to Use Styles.
+
+
+ Attractive and Easy to Use Styles.
+
+
+
+
+ Available in Odoo 16.0
+ Community, Enterprise and Odoo.sh.
+
+
+ Available in Odoo 16.0
+ Community, Enterprise and Odoo.sh.
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+ 
+
+ + Enable Social Media Sharing. +
++ Go to Website => Configuration => Settings, enable social media sharing and + choose the style.
+
+
+ 
+
+ + Enable Social Media Share. +
++ Enable the required social media sharing.
+
+
+ 
+
+ + Style is Loaded. +
++ We can see the social media share style and here is how + ClassicCircle looks like.
+
+
+ 
+
+ + DynamicHover looks like this, and on hovering each icon, its + changes.
+
+
+ 
+
+ + Likewise, we can choose the required style. +
+
+
+ 
+
+ + We can see style is changing.
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ Related Modules
+Explore our related modules
++
+ 
+ 
+ 
+ 
+ 
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
diff --git a/website_social_media_icon_style/static/src/scss/ClassicCircle.scss b/website_social_media_icon_style/static/src/scss/ClassicCircle.scss
new file mode 100644
index 000000000..71c4b499a
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/ClassicCircle.scss
@@ -0,0 +1,57 @@
+.style2 {
+ position: relative;
+ width: 40px;
+ height: 40px;
+ display: block;
+ text-align: center;
+ margin: 0 8px;
+ border-radius: 50%;
+ padding: 4px;
+ box-sizing: border-box;
+ text-decoration: none;
+ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
+ background: linear-gradient(0deg, #f5f5f5, #fff);
+ transition: .5s;
+}
+.style2:hover {
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+ text-decoration: none;
+}
+.style2 .fa {
+ width: 100%;
+ height: 100%;
+ display: block;
+ background: linear-gradient(0deg, #fff, #f5f5f5);
+ border-radius: 50%;
+ line-height: calc(40px - 8px);
+ font-size: 16px;
+ color: #333;
+ transition: .5s;
+}
+.style2:hover .fa-facebook {
+ color: #3b5998;
+}
+.style2:hover .fa-twitter {
+ color: #00aced;
+}
+.style2:hover .fa-pinterest {
+ color: #bd081c;
+}
+.style2:hover .fa-reddit {
+ color: #ff4500;
+}
+.style2:hover .fa-hacker-news {
+ color: #ff6600;
+}
+.style2:hover .fa-envelope {
+ color: #007bff;
+}
+.style2:hover .fa-linkedin {
+ color: #007bb6;
+}
+.style2:hover .fa-hacker-news {
+ color: #ff6600;
+}
+.style2:hover .fa-whatsapp {
+ color: #25d366;
+}
diff --git a/website_social_media_icon_style/static/src/scss/DynamicHover.scss b/website_social_media_icon_style/static/src/scss/DynamicHover.scss
new file mode 100644
index 000000000..c48a50061
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/DynamicHover.scss
@@ -0,0 +1,69 @@
+.style3 {
+ position: relative;
+ font-size: 22px;
+ border-radius: 50%;
+ display: inline-block;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ color: #333;
+ text-decoration: none;
+ .fa {
+ width: 50px;
+ height: 50px;
+ display: flex;
+ border-radius: 50%;
+ line-height: calc(40px - 8px);
+ font-size: 16px;
+ background-color: #333;
+ color: #ffffff;
+ transition: 0.5s;
+ }
+ &:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
+ }
+ &:hover span {
+ text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
+ }
+ .fa-facebook:hover,
+ .fa-facebook:hover span {
+ background-color: #3b5999;
+ color: #ffffff;
+ }
+ .fa-twitter:hover,
+ .fa-twitter:hover span {
+ background-color: #46c1f6;
+ color: #ffffff;
+ }
+ .fa-pinterest:hover,
+ .fa-pinterest:hover span {
+ background-color: #dd4b39;
+ color: #ffffff;
+ }
+ .fa-reddit:hover,
+ .fa-reddit:hover span {
+ background-color: #dd4b39;
+ color: #ffffff;
+ }
+ .fa-envelope:hover,
+ .fa-envelope:hover span {
+ background-color: #35979c;
+ color: #ffffff;
+ }
+ .fa-linkedin:hover,
+ .fa-linkedin:hover span {
+ background-color: #007bb6;
+ color: #ffffff;
+ }
+ .fa-hacker-news:hover,
+ .fa-hacker-news:hover span {
+ background-color: #e4405f;
+ color: #ffffff;
+ }
+ .fa-whatsapp:hover,
+ .fa-whatsapp:hover span {
+ background-color: #28a745;
+ color: #ffffff;
+ }
+}
diff --git a/website_social_media_icon_style/static/src/scss/ElegantCircle.scss b/website_social_media_icon_style/static/src/scss/ElegantCircle.scss
new file mode 100644
index 000000000..e170fef9e
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/ElegantCircle.scss
@@ -0,0 +1,55 @@
+.style1 {
+ position: relative;
+ width:60px;
+ height:60px;
+ display:block;
+ text-align:center;
+ margin:0 10px;
+ border-radius: 50%;
+ padding: 6px;
+ box-sizing: border-box;
+ text-decoration:none;
+ box-shadow: 0 10px 15px rgba(0,0,0,0.3);
+ background: linear-gradient(0deg, #ddd, #fff);
+ transition: .5s;
+}
+.style1:hover {
+ box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+ text-decoration:none;
+}
+.style1 .fa {
+ widht: 100%;
+ height:100%;
+ display:block;
+ background: linear-gradient(0deg, #fff, #ddd);
+ border-radius: 50%;
+ line-height: calc(60px - 12px);
+ font-size:24px;
+ color: #262626;
+ transition: .5s;
+}
+ .style1:hover .fa-facebook {
+ color: #3b5998;
+}
+
+.style1:hover .fa-twitter {
+ color: #00aced;
+}
+.style1:hover .fa-pinterest {
+ color: #dd4b39;
+}
+.style1:hover .fa-reddit {
+ color: #dd4b39;
+}
+.style1:hover .fa-envelope {
+ color: #35979c;
+}
+.style1:hover .fa-linkedin {
+ color: #007bb6;
+}
+.style1:hover .fa-hacker-news {
+ color: #e4405f;
+}
+.style1:hover .fa-whatsapp {
+ color: #28a745;
+}
diff --git a/website_social_media_icon_style/static/src/scss/GradientRotate.scss b/website_social_media_icon_style/static/src/scss/GradientRotate.scss
new file mode 100644
index 000000000..5050cda8e
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/GradientRotate.scss
@@ -0,0 +1,61 @@
+.style9 {
+ position: relative;
+ width: 60px;
+ height: 60px;
+ display: block;
+ text-align: center;
+ margin: 0 8px;
+ border-radius: 50%;
+ padding: 4px;
+ box-sizing: border-box;
+ text-decoration: none;
+ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
+ background: linear-gradient(0deg, #f5f5f5, #fff);
+ transition: .5s;
+}
+.style9:hover {
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+ text-decoration: none;
+}
+.style9 .fa {
+ width: 100%;
+ height: 100%;
+ display: block;
+ background: linear-gradient(0deg, #fff, #f5f5f5);
+ border-radius: 50%;
+ line-height: calc(40px - 8px);
+ font-size: 16px;
+ color: #333;
+ transition: .5s;
+}
+.style9:hover .fa {
+ transform: rotate(360deg); /* Add rotation effect */
+ font-size: 20px;
+}
+.style9:hover .fa-facebook {
+ color: #3b5998;
+}
+.style9:hover .fa-twitter {
+ color: #00aced;
+}
+.style9:hover .fa-pinterest {
+ color: #bd081c;
+}
+.style9:hover .fa-reddit {
+ color: #ff4500;
+}
+.style9:hover .fa-hacker-news {
+ color: #ff6600;
+}
+.style9:hover .fa-envelope {
+ color: #007bff;
+}
+.style9:hover .fa-linkedin {
+ color: #007bb6;
+}
+.style9:hover .fa-hacker-news {
+ color: #ff6600;
+}
+.style9:hover .fa-whatsapp {
+ color: #25d366;
+}
diff --git a/website_social_media_icon_style/static/src/scss/IconRotate.scss b/website_social_media_icon_style/static/src/scss/IconRotate.scss
new file mode 100644
index 000000000..b1e81f68f
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/IconRotate.scss
@@ -0,0 +1,101 @@
+.style6 {
+ position: relative;
+ font-size: 22px;
+ border-radius: 50%;
+ display: inline-block;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ color: #333;
+ text-decoration: none;
+}
+.style6 .fa {
+ width: 50px;
+ height: 50px;
+ display: flex;
+ border-radius: 50%;
+ line-height: calc(40px - 8px);
+ font-size: 16px;
+ color: #333;
+ transition: .5s;
+}
+.style6 .fa-facebook{
+ color: white;
+ background-color: #3b5999;
+}
+.style6 .fa-twitter{
+ color: white;
+ background-color: #46c1f6;
+}
+.style6 .fa-pinterest{
+ color: white;
+ background-color: #dd4b39;
+}
+.style6 .fa-reddit{
+ color: white;
+ background-color: #007bff;
+}
+.style6 .fa-envelope{
+ color: white;
+ background-color: #dd4b39;
+}
+.style6 .fa-linkedin{
+ color: white;
+ background-color: #007bb6;
+}
+.style6 .fa-hacker-news{
+ color: white;
+ background-color: #e4405f;
+}
+.style6 .fa-whatsapp{
+ color: white;
+ background-color: #28a745;
+}
+.style6 .fa-facebook:hover,
+.style6 .fa-facebook:hover span {
+ background-color: #ffffff;
+ color: #3b5999;
+ font-size: 30px;
+}
+.style6 .fa-twitter:hover,
+.style6 .fa-twitter:hover span {
+ background-color: #ffffff;
+ color: #46c1f6;
+ font-size: 30px;
+}
+.style6 .fa-pinterest:hover,
+.style6 .fa-pinterest:hover span {
+ background-color: #ffffff;
+ color: #dd4b39;
+ font-size: 30px;
+}
+.style6 .fa-reddit:hover,
+.style6 .fa-reddit:hover span {
+ background-color: #ffffff;
+ color: #007bff;
+ font-size: 30px;
+}
+.style6 .fa-envelope:hover,
+.style6 .fa-envelope:hover span {
+ background-color: #ffffff;
+ color: #dd4b39;
+ font-size: 30px;
+}
+.style6 .fa-linkedin:hover,
+.style6 .fa-linkedin:hover span {
+ background-color: #ffffff;
+ color: #007bb6;
+ font-size: 30px;
+}
+.style6 .fa-hacker-news:hover,
+.style6 .fa-hacker-news:hover span {
+ background-color: #ffffff;
+ color: #e4405f;
+ font-size: 30px;
+}
+.style6 .fa-whatsapp:hover,
+.style6 .fa-whatsapp:hover span {
+ background-color: #ffffff;
+ color: #28a745;
+ font-size: 30px;
+}
diff --git a/website_social_media_icon_style/static/src/scss/IconWithName.scss b/website_social_media_icon_style/static/src/scss/IconWithName.scss
new file mode 100644
index 000000000..b59f80b52
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/IconWithName.scss
@@ -0,0 +1,54 @@
+.style11 {
+ position: relative;
+ font-size: 18px;
+ border-radius: 50%;
+ display: inline-block;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ color: #333;
+ text-decoration: none;
+}
+.style11 .fa {
+ padding: 20px;
+ font-size: px;
+ width: 100%;
+ text-align: center;
+ text-decoration: none;
+ margin: 1px -7px;
+}
+.style11 .fa:hover {
+ opacity: 0.7;
+}
+.style11 .fa-facebook{
+ color: white;
+ background-color: #3b5999;
+}
+.style11 .fa-twitter{
+ color: white;
+ background-color: #46c1f6;
+}
+.style11 .fa-pinterest{
+ color: white;
+ background-color: #dd4b39;
+}
+.style11 .fa-reddit{
+ color: white;
+ background-color: #007bff;
+}
+.style11 .fa-envelope{
+ color: white;
+ background-color: #dd4b39;
+}
+.style11 .fa-linkedin{
+ color: white;
+ background-color: #007bb6;
+}
+.style11 .fa-hacker-news{
+ color: white;
+ background-color: #e4405f;
+}
+.style11 .fa-whatsapp{
+ color: white;
+ background-color: #28a745;
+}
diff --git a/website_social_media_icon_style/static/src/scss/RotateLargeIcon.scss b/website_social_media_icon_style/static/src/scss/RotateLargeIcon.scss
new file mode 100644
index 000000000..6d1e4259b
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/RotateLargeIcon.scss
@@ -0,0 +1,60 @@
+.style10 {
+ position: relative;
+ width: 40px;
+ height: 40px;
+ display: block;
+ text-align: center;
+ margin: 0 8px;
+ border-radius: 50%;
+ padding: 4px;
+ box-sizing: border-box;
+ text-decoration: none;
+ background-color: #f5f5f5;
+ transition: .5s;
+}
+.style10:hover {
+ background-color: #fffff;
+ text-decoration: none;
+}
+.style10 .fa {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-size: 16px;
+ color: #333;
+ transition: .5s;
+}
+.style10:hover .fa {
+ transform: rotate(360deg);
+ font-size: 50px;
+}
+.style10:hover .fa-facebook {
+ color: #3b5998;
+}
+.style10:hover .fa-twitter {
+ color: #00aced;
+}
+.style10:hover .fa-pinterest {
+ color: #bd081c;
+}
+.style10:hover .fa-reddit {
+ color: #007bff;
+}
+.style10:hover .fa-hacker-news {
+ color: #ff6600;
+}
+.style10:hover .fa-envelope {
+ color: #dd4b39;
+}
+.style10:hover .fa-linkedin {
+ color: #007bb6;
+}
+.style10:hover .fa-hacker-news {
+ color: #ff6600;
+}
+.style10:hover .fa-whatsapp {
+ color: #25d366;
+}
diff --git a/website_social_media_icon_style/static/src/scss/SquareBackground.scss b/website_social_media_icon_style/static/src/scss/SquareBackground.scss
new file mode 100644
index 000000000..5c63c9680
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/SquareBackground.scss
@@ -0,0 +1,99 @@
+.style7 {
+ position: relative;
+ font-size: 22px;
+ border-radius: 50%;
+ display: inline-block;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ color: #333;
+ text-decoration: none;
+}
+.style7 .fa {
+ padding: 20px;
+ font-size: 26px;
+ width: 60px;
+ text-align: center;
+ text-decoration: none;
+ margin: 5px -2px;
+}
+.style7 .fa-facebook{
+ color: white;
+ background-color: #3b5999;
+}
+.style7 .fa-twitter{
+ color: white;
+ background-color: #46c1f6;
+}
+.style7 .fa-pinterest{
+ color: white;
+ background-color: #dd4b39;
+}
+.style7 .fa-reddit{
+ color: white;
+ background-color: #007bff;
+}
+.style7 .fa-envelope{
+ color: white;
+ background-color: #dd4b39;
+}
+.style7 .fa-linkedin{
+ color: white;
+ background-color: #007bb6;
+}
+.style7 .fa-hacker-news{
+ color: white;
+ background-color: #e4405f;
+}
+.style7 .fa-whatsapp{
+ color: white;
+ background-color: #28a745;
+}
+.style7 .fa-facebook:hover,
+.style7 .fa-facebook:hover span {
+ background-color: #ffffff;
+ color: #3b5999;
+ font-size: 30px;
+}
+.style7 .fa-twitter:hover,
+.style7 .fa-twitter:hover span {
+ background-color: #ffffff;
+ color: #46c1f6;
+ font-size: 30px;
+}
+.style7 .fa-pinterest:hover,
+.style7 .fa-pinterest:hover span {
+ background-color: #ffffff;
+ color: #dd4b39;
+ font-size: 30px;
+}
+.style7 .fa-reddit:hover,
+.style7 .fa-reddit:hover span {
+ background-color: #ffffff;
+ color: #007bff;
+ font-size: 30px;
+}
+.style7 .fa-envelope:hover,
+.style7 .fa-envelope:hover span {
+ background-color: #ffffff;
+ color: #dd4b39;
+ font-size: 30px;
+}
+.style7 .fa-linkedin:hover,
+.style7 .fa-linkedin:hover span {
+ background-color: #ffffff;
+ color: #007bb6;
+ font-size: 30px;
+}
+.style7 .fa-hacker-news:hover,
+.style7 .fa-hacker-news:hover span {
+ background-color: #ffffff;
+ color: #e4405f;
+ font-size: 30px;
+}
+.style7 .fa-whatsapp:hover,
+.style7 .fa-whatsapp:hover span {
+ background-color: #ffffff;
+ color: #28a745;
+ font-size: 30px;
+}
diff --git a/website_social_media_icon_style/static/src/scss/SubtleHoverSquare.scss b/website_social_media_icon_style/static/src/scss/SubtleHoverSquare.scss
new file mode 100644
index 000000000..dd244b861
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/SubtleHoverSquare.scss
@@ -0,0 +1,54 @@
+.style8 {
+ position: relative;
+ font-size: 22px;
+ border-radius: 50%;
+ display: inline-block;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ color: #333;
+ text-decoration: none;
+}
+.style8 .fa {
+ padding: 20px;
+ font-size: 22px;
+ width: 60px;
+ text-align: center;
+ text-decoration: none;
+ margin: 1px -7px;
+}
+.style8 .fa:hover {
+ opacity: 0.7;
+}
+.style8 .fa-facebook{
+ color: white;
+ background-color: #3b5999;
+}
+.style8 .fa-twitter{
+ color: white;
+ background-color: #46c1f6;
+}
+.style8 .fa-pinterest{
+ color: white;
+ background-color: #dd4b39;
+}
+.style8 .fa-reddit{
+ color: white;
+ background-color: #007bff;
+}
+.style8 .fa-envelope{
+ color: white;
+ background-color: #dd4b39;
+}
+.style8 .fa-linkedin{
+ color: white;
+ background-color: #007bb6;
+}
+.style8 .fa-hacker-news{
+ color: white;
+ background-color: #e4405f;
+}
+.style8 .fa-whatsapp{
+ color: white;
+ background-color: #28a745;
+}
diff --git a/website_social_media_icon_style/static/src/scss/VibrantCircle.scss b/website_social_media_icon_style/static/src/scss/VibrantCircle.scss
new file mode 100644
index 000000000..e7d000a3e
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/VibrantCircle.scss
@@ -0,0 +1,100 @@
+.style5 {
+ position: relative;
+ font-size: 22px;
+ border-radius: 50%;
+ display: inline-block;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ color: #333;
+ text-decoration: none;
+}
+.style5 .fa {
+ width: 50px;
+ height: 50px;
+ display: flex;
+ border-radius: 50%;
+ line-height: calc(40px - 8px);
+ font-size: 16px;
+ color: #333;
+ transition: .5s;
+}
+.style5 .fa-facebook{
+ color: white;
+ background-color: #3b5999;
+}
+.style5 .fa-twitter{
+ color: white;
+ background-color: #46c1f6;
+}
+.style5 .fa-pinterest{
+ color: white;
+ background-color: #dd4b39;
+}
+.style5 .fa-reddit{
+ color: white;
+ background-color: #007bff;
+}
+.style5 .fa-envelope{
+ color: white;
+ background-color: #dd4b39;
+}
+.style5 .fa-linkedin{
+ color: white;
+ background-color: #007bb6;
+}
+.style5 .fa-hacker-news{
+ color: white;
+ background-color: #e4405f;
+}
+.style5 .fa-whatsapp{
+ color: white;
+ background-color: #28a745;
+}
+.style5:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
+}
+.style5:hover span {
+ text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
+}
+.style5 .fa-facebook:hover,
+.style5 .fa-facebook:hover span {
+ background-color: #3b5999;
+ color: #ffffff;
+}
+.style5 .fa-twitter:hover,
+.style5 .fa-twitter:hover span {
+ background-color: #46c1f6;
+ color: #ffffff;
+}
+.style5 .fa-pinterest:hover,
+.style5 .fa-pinterest:hover span {
+ background-color: #dd4b39;
+ color: #ffffff;
+}
+.style5 .fa-reddit:hover,
+.style5 .fa-reddit:hover span {
+ background-color: #007bff;
+ color: #ffffff;
+}
+.style5 .fa-envelope:hover,
+.style5 .fa-envelope:hover span {
+ background-color: #dd4b39;
+ color: #ffffff;
+}
+.style5 .fa-linkedin:hover,
+.style5 .fa-linkedin:hover span {
+ background-color: #007bb6;
+ color: #ffffff;
+}
+.style5 .fa-hacker-news:hover,
+.style5 .fa-hacker-news:hover span {
+ background-color: #e4405f;
+ color: #ffffff;
+}
+.style5 .fa-whatsapp:hover,
+.style5 .fa-whatsapp:hover span {
+ background-color: #28a745;
+ color: #ffffff;
+}
diff --git a/website_social_media_icon_style/static/src/scss/VividSpinner.scss b/website_social_media_icon_style/static/src/scss/VividSpinner.scss
new file mode 100644
index 000000000..a0db4f856
--- /dev/null
+++ b/website_social_media_icon_style/static/src/scss/VividSpinner.scss
@@ -0,0 +1,68 @@
+.style4 {
+ position: relative;
+ font-size: 22px;
+ border-radius: 50%;
+ display: inline-block;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ color: #333;
+ text-decoration: none;
+}
+.style4 .fa {
+ width: 50px;
+ height: 50px;
+ display: flex;
+ border-radius: 50%;
+ line-height: calc(40px - 8px);
+ font-size: 16px;
+ color: #333;
+ transition: .5s;
+}
+.style4:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
+}
+.style4:hover span {
+ text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
+}
+.style4 .fa-facebook:hover,
+.style4 .fa-facebook:hover span {
+ background-color: #3b5999;
+ color: #ffffff;
+}
+.style4 .fa-twitter:hover,
+.style4 .fa-twitter:hover span {
+ background-color: #46c1f6;
+ color: #ffffff;
+}
+.style4 .fa-pinterest:hover,
+.style4 .fa-pinterest:hover span {
+ background-color: #dd4b39;
+ color: #ffffff;
+}
+.style4 .fa-reddit:hover,
+.style4 .fa-reddit:hover span {
+ background-color: #dd4b39;
+ color: #ffffff;
+}
+.style4 .fa-envelope:hover,
+.style4 .fa-envelope:hover span {
+ background-color: #35979c;
+ color: #ffffff;
+}
+.style4 .fa-linkedin:hover,
+.style4 .fa-linkedin:hover span {
+ background-color: #007bb6;
+ color: #ffffff;
+}
+.style4 .fa-hacker-news:hover,
+.style4 .fa-hacker-news:hover span {
+ background-color: #e4405f;
+ color: #ffffff;
+}
+.style4 .fa-whatsapp:hover,
+.style4 .fa-whatsapp:hover span {
+ background-color: #28a745;
+ color: #ffffff;
+}
diff --git a/website_social_media_icon_style/views/res_config_settings_views.xml b/website_social_media_icon_style/views/res_config_settings_views.xml
new file mode 100644
index 000000000..0acb5e2a3
--- /dev/null
+++ b/website_social_media_icon_style/views/res_config_settings_views.xml
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+ Product Social Media Sharing
+
+
+
+
+
+
+
+
+ Enable Social Media
+ Sharing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+