Transform Your Squarespace Website with Magical Christmas Social Buttons
Introduction: Festive Magic Meets Practical Solutions
The holiday season is the perfect time to add a festive touch to your Squarespace website. But Squarespace users often face a frustrating limitation: the platform doesn’t provide built-in options for social sharing buttons. That’s where we come in. Whether your site is a shop, a blog, or anything in between, this guide will show you how to implement beautiful, functional, and Christmas-themed social buttons to captivate your visitors.
The Foundation: The Code That Makes It Happen
Before diving into holiday designs, ensure you have the correct foundation in your Footer Code Injection. This JavaScript makes your social buttons functional across your site. You can read our other articles to check if you have the final Footer Code for your website. In case you want to try some of the freebies, check our Public Blog for some of the Festive Designs here.
The Festive Touch: Custom Christmas CSS
Now, let’s bring in the Christmas magic! Below are festive designs that incorporate the Christmas Spirit. Add this CSS to your Design > Custom CSS section to style the buttons.
Embossed Christmas Spirit Sharing Buttons
Get this design with the Following CSS:
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
position: relative; /* Required for snow placement */
}
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px; /* Icon size */
height: 60px;
border-radius: 50%; /* Snowball effect */
font-size: 24px; /* Icon size */
text-decoration: none;
position: relative;
background: radial-gradient(circle, #ffffff, #dcecff); /* Snowy white background */
color: white; /* Icon color */
transition: all 0.3s ease;
overflow: hidden;
}
/* Snow Pile Around Buttons */
.share-icon::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 130px; /* Wider than the button */
height: 20px;
background: radial-gradient(circle, #ffffff, #e0f7fa); /* Gradient snow pile */
border-radius: 15px; /* Rounded snow effect */
z-index: -1; /* Behind the button */
}
/* Falling Snowflakes on Hover */
.share-icon:hover::after {
content: ' * . ❄️ . * . *'; /* Snowflakes */ (you can tweak the symbols to your liking)
position: absolute;
font-size: 16px;
animation: snowfall 5s infinite ease-in-out; (you can tweak the seconds to your liking)
color: rgba(255, 255, 255, 0.8); /* Light snowy color */
}
/* Snowfall Animation */
@keyframes snowfall {
0% {
top: -10px;
opacity: 1;
transform: translateX(-10px) rotate(0deg);
}
50% {
transform: translateX(10px) rotate(0deg);
opacity: 0.8;
}
100% {
top: 80px;
opacity: 0;
transform: translateX(-10px) rotate(0deg);
}
}
/* Platform-Specific Colors and Logo Adjustments */
.share-icon.facebook {
background: radial-gradient(circle, #3b5998, #1a2948); /* Facebook gradient */
color: #ffffff; /* White logo */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.twitter {
background: radial-gradient(circle, #1da1f2, #0d3b5f); /* Twitter gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.pinterest {
background: radial-gradient(circle, #bd081c, #6e0410); /* Pinterest gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.linkedin {
background: radial-gradient(circle, #0077b5, #00405a); /* LinkedIn gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.tumblr {
background: radial-gradient(circle, #35465c, #1a2430); /* Tumblr gradient */
color: #ffffff; /* White logo */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
/* Hover Effects */
.share-icon:hover {
transform: scale(1.1); /* Subtle hover effect */
}
/* Mobile Styling */
@media (max-width: 574px) {
.share-icon {
width: 50px; /* Smaller size for mobile */
height: 50px;
font-size: 20px;
}
.share-icon::before {
width: 70px; /* Adjust snow pile size for mobile */
height: 15px;
}
}
Please note that the icons on your front page are probably done with a code block. While the html and the respective CSS design affect all icons site wide, please keep in mind that for code blocks, you may need to manually adjust the length of the code block and fit it to your page. In this case, this CSS makes the buttons larger, so I will have to go and manually make the code block wider, in order to fit into one row!
Here is the respective CSS for this design:
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
position: relative; /* Required for decorative elements */
}
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px; /* Icon size */
height: 60px;
border-radius: 50%; /* Rounded for ornament effect */
font-size: 24px;
text-decoration: none;
position: relative;
background: linear-gradient(145deg, #ffd700, #ff6347); /* Luxurious gold to red gradient */
color: #ffffff; /* Icon color */
border: 2px solid #ffffff; /* White border */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.8); /* Subtle glow */
transition: all 0.3s ease;
overflow: hidden; /* Keeps decorative elements contained */
}
/* Hover Effect */
.share-icon:hover {
transform: scale(1.1); /* Slight scale for interaction */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 1); /* Enhanced glow on hover */
}
/* Decorative Snowflakes on Hover */
.share-icon:hover::before {
content: '. ❄ . * . *'; /* Single snowflake for simplicity */
position: absolute;
top: -5px; /* Start slightly above the icon */
left: 50%;
transform: translateX(-50%);
font-size: 18px;
animation: snowfall 5s infinite linear; /* Smoother snowfall animation */
color: #ffffff; /* Snowflake color */
}
/* Snowfall Animation */
@keyframes snowfall {
0% { top: -10px; opacity: 1; }
50% { top: 30px; opacity: 0.5; }
100% { top: 60px; opacity: 0; }
}
/* Platform-Specific Colors */
.share-icon.facebook { background: linear-gradient(145deg, #3b5998, #1e2e4c); }
.share-icon.twitter { background: linear-gradient(145deg, #1da1f2, #0d5e91); }
.share-icon.pinterest { background: linear-gradient(145deg, #bd081c, #750410); }
.share-icon.linkedin { background: linear-gradient(145deg, #0077b5, #003c5a); }
.share-icon.tumblr { background: linear-gradient(145deg, #35465c, #1a2430); }
.share-icon.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
/* Mobile Styling */
@media (max-width: 574px) {
.share-icon {
width: 50px; /* Smaller size for mobile */
height: 50px;
font-size: 20px;
}
}
An example of what I mentioned above. Also, this is a new design with different snowflakes.
Here is the CSS for this design:
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
position: relative; /* Required for snow placement */
}
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px; /* Icon size */
height: 60px;
border-radius: 50%; /* Snowball effect */
font-size: 24px; /* Icon size */
text-decoration: none;
position: relative;
background: radial-gradient(circle, #ffffff, #dcecff); /* Snowy white background */
color: white; /* Icon color */
border: 3px solid #e3f2fd; /* Icy border */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.8); /* Frosty glow */
transition: all 0.3s ease;
overflow: hidden;
}
/* Snow Pile Around Buttons */
.share-icon::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 130px; /* Wider than the button */
height: 20px;
background: radial-gradient(circle, #ffffff, #e0f7fa); /* Gradient snow pile */
border-radius: 15px; /* Rounded snow effect */
z-index: -1; /* Behind the button */
}
/* Falling Snowflakes on Hover */
.share-icon:hover::after {
content: ' * . ❄️ . * . *'; /* Snowflakes */
position: absolute;
font-size: 16px;
animation: snowfall 5s infinite ease-in-out;
color: rgba(255, 255, 255, 0.8); /* Light snowy color */
}
/* Snowfall Animation */
@keyframes snowfall {
0% {
top: -10px;
opacity: 1;
transform: translateX(-10px) rotate(0deg);
}
50% {
transform: translateX(10px) rotate(0deg);
opacity: 0.8;
}
100% {
top: 80px;
opacity: 0;
transform: translateX(-10px) rotate(0deg);
}
}
/* Platform-Specific Colors and Logo Adjustments */
.share-icon.facebook {
background: radial-gradient(circle, #3b5998, #1a2948); /* Facebook gradient */
color: #ffffff; /* White logo */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.twitter {
background: radial-gradient(circle, #1da1f2, #0d3b5f); /* Twitter gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.share-icon.pinterest {
background: radial-gradient(circle, #bd081c, #6e0410); /* Pinterest gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.share-icon.linkedin {
background: radial-gradient(circle, #0077b5, #00405a); /* LinkedIn gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.share-icon.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.share-icon.tumblr {
background: radial-gradient(circle, #35465c, #1a2430); /* Tumblr gradient */
color: #ffffff; /* White logo */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhances readability */
}
/* Hover Effects */
.share-icon:hover {
transform: scale(1.2);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.9); /* Brighter frost glow */
}
/* Mobile Styling */
@media (max-width: 574px) {
.share-icon {
width: 50px; /* Smaller size for mobile */
height: 50px;
font-size: 20px;
}
.share-icon::before {
width: 70px; /* Adjust snow pile size for mobile */
height: 15px;
}
}
Don’t forget to tweak the symbols and seconds to your liking!
Also, if you like the shadowed versions of the icons, you can always add this to any of your codes:
.share-icon.tumblr { (copy below this line and paste beneath every row that' starts with .share-icon. (respective media)
background: radial-gradient(circle, #35465c, #1a2430); /* Tumblr gradient */
color: #ffffff; /* White logo */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhances readability */
}
Where the first line “.share-icon.tumblr” should serve as a navigation for you to put the text below each respective social media.
Black and Gold Luxury Icons
Here is the CSS:
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
position: relative;
}
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 24px;
text-decoration: none;
background: #000000; /* Deep black background */
color: #ffd700; /* Gold logo */
border: 2px solid #ffd700; /* Gold border */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.8); /* Gold glow */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover Effect */
.share-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 223, 100, 1); /* Enhanced luxury glow */
}
EverGreen Frost Icons CSS:
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 24px;
text-decoration: none;
background: radial-gradient(circle, #4caf50, #2e7d32); /* Evergreen gradient */
color: #ffffff;
border: 2px solid #81c784;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.6), 0 0 20px rgba(129, 199, 132, 0.8); /* Green frosty glow */
transition: all 0.3s ease;
}
/* Hover Effect */
.share-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 18px rgba(76, 175, 80, 0.8), 0 0 25px rgba(129, 199, 132, 1); /* Enhanced green glow */
}
*****************************************************************************************************
Gold and Green Striped Icons CSS:
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 24px;
text-decoration: none;
background: repeating-linear-gradient(
45deg,
#ffd700,
#ffd700 10px,
#4caf50 10px,
#4caf50 20px
); /* Gold and green stripes */
color: #ffffff;
border: 2px solid #daa520;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6), 0 0 20px rgba(76, 175, 80, 0.8); /* Dual-tone glow */
transition: all 0.3s ease;
}
/* Hover Effect */
.share-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 18px rgba(255, 215, 0, 0.8), 0 0 25px rgba(76, 175, 80, 1); /* Enhanced dual-tone glow */
}
*****************************************************************************************************
Christmas Ornament Icons CSS:
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 24px;
text-decoration: none;
background: radial-gradient(circle, #d32f2f, #b71c1c); /* Red bauble gradient */
color: #ffffff;
border: 3px solid #f44336;
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.6), 0 0 20px rgba(183, 28, 28, 0.8); /* Christmas glow */
transition: all 0.3s ease;
}
/* Hover Effect */
.share-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 18px rgba(244, 67, 54, 0.8), 0 0 25px rgba(211, 47, 47, 1); /* Enhanced glow */
}
*****************************************************************************************************
Golden Frost Icons CSS:
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 24px;
text-decoration: none;
background: radial-gradient(circle, #ffffff, #f5e9dc); /* Frosty white with gold undertones */
color: #b8860b; /* Golden logos */
border: 2px solid #ffd700;
box-shadow: 0 4px 12px rgba(255, 223, 100, 0.4), 0 0 15px rgba(255, 215, 0, 0.8); /* Golden frosty glow */
transition: all 0.3s ease;
}
/* Hover Effect */
.share-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 18px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 223, 100, 1); /* Enhanced glow */
}
*****************************************************************************************************
Candy Cane Style CSS:
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
position: relative; /* For snowflake placement */
}
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%; /* Circular buttons */
font-size: 24px;
text-decoration: none;
background: repeating-linear-gradient(
45deg,
#ff0000,
#ff0000 10px,
#ffffff 10px,
#ffffff 20px
); /* Candy cane stripes */
color: #ffffff; /* White logos */
border: 2px solid #ff9999;
box-shadow: 0 4px 12px rgba(255, 50, 50, 0.7), 0 0 20px rgba(255, 200, 200, 0.8); /* Festive glow */
transition: all 0.3s ease;
}
/* Snowflake Animation */
.share-icon:hover::before {
content: '❊ . * . ❊ . ❊ . *';
position: absolute;
animation: snowfall 4s infinite ease-in-out;
font-size: 16px;
top: -10px;
opacity: 1;
color: rgba(255, 255, 255, 0.8);
}
/* Snowflake Animation Keyframes */
@keyframes snowfall {
0% { top: -20px; opacity: 1; transform: rotate(0deg); }
50% { transform: rotate(0deg); opacity: 0.8; }
100% { top: 80px; opacity: 0; transform: rotate(0deg); }
}
Light Frosty Icons
Subtle and classic, these frosty icons keep the focus on elegance and minimalism.
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
position: relative; /* For snowflake placement */
}
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%; /* Circular buttons */
font-size: 24px;
text-decoration: none;
background: radial-gradient(circle, #ffffff, #dceffd); /* Light frosty gradient */
color: #333333; /* Darker logos */
border: 2px solid #e3f2fd;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 255, 255, 0.5); /* Subtle frost */
transition: all 0.3s ease;
}
/* Snowflake Animation */
.share-icon:hover::before {
content: '❊ . * . ❊ . ❊ . *';
position: absolute;
animation: snowfall 4s infinite ease-in-out;
font-size: 16px;
top: -10px;
opacity: 1;
color: rgba(255, 255, 255, 0.8);
}
/* Snowflake Animation Keyframes */
@keyframes snowfall {
0% { top: -20px; opacity: 1; transform: rotate(0deg); }
50% { transform: rotate(0deg); opacity: 0.8; }
100% { top: 80px; opacity: 0; transform: rotate(0deg); }
}
You can always tweak the snowflakes and their speed, or you can remove them if you like. :)
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
position: relative; /* For snowflake placement */
}
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%; /* Circular buttons */
font-size: 24px;
text-decoration: none;
background: radial-gradient(circle, #333333, #111111); /* Dark frosty gradient */
color: #ffffff; /* White logos */
border: 2px solid #555555;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.4); /* Frosty glow */
transition: all 0.3s ease;
}
/* Snowflake Animation */
.share-icon:hover::before {
content: '❊ . . ❊ . ❊ . ';
position: absolute;
animation: snowfall 4s infinite ease-in-out;
font-size: 16px;
top: -10px;
opacity: 1;
color: rgba(255, 255, 255, 0.8);
}
/* Snowflake Animation Keyframes */
@keyframes snowfall {
0% { top: -20px; opacity: 1; transform: rotate(0deg); }
50% { transform: rotate(0deg); opacity: 0.8; }
100% { top: 80px; opacity: 0; transform: rotate(0deg); }
}
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
position: relative; /* Required for snow placement */
}
/* Individual Share Icons */
.share-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px; /* Icon size */
height: 60px;
border-radius: 50%; /* Snowball effect */
font-size: 24px; /* Icon size */
text-decoration: none;
position: relative;
background: radial-gradient(circle, #ffffff, #dcecff); /* Snowy white background */
color: white; /* Icon color */
transition: all 0.3s ease;
overflow: hidden;
}
/* Snow Pile Around Buttons */
.share-icon::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 130px; /* Wider than the button */
height: 20px;
background: radial-gradient(circle, #ffffff, #e0f7fa); /* Gradient snow pile */
border-radius: 15px; /* Rounded snow effect */
z-index: -1; /* Behind the button */
}
/* Falling Snowflakes on Hover */
.share-icon:hover::after {
content: ' . ❄️ . . '; / Snowflakes */
position: absolute;
font-size: 16px;
animation: snowfall 5s infinite ease-in-out;
color: rgba(255, 255, 255, 0.8); /* Light snowy color */
}
/* Snowfall Animation */
@keyframes snowfall {
0% {
top: -10px;
opacity: 1;
transform: translateX(-10px) rotate(0deg);
}
50% {
transform: translateX(10px) rotate(0deg);
opacity: 0.8;
}
100% {
top: 80px;
opacity: 0;
transform: translateX(-10px) rotate(0deg);
}
}
/* Platform-Specific Colors and Logo Adjustments */
.share-icon.facebook {
background: radial-gradient(circle, #3b5998, #1a2948); /* Facebook gradient */
color: #ffffff; /* White logo */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.twitter {
background: radial-gradient(circle, #1da1f2, #0d3b5f); /* Twitter gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.pinterest {
background: radial-gradient(circle, #bd081c, #6e0410); /* Pinterest gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.linkedin {
background: radial-gradient(circle, #0077b5, #00405a); /* LinkedIn gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram gradient */
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
.share-icon.tumblr {
background: radial-gradient(circle, #35465c, #1a2430); /* Tumblr gradient */
color: #ffffff; /* White logo */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Enhance readability */
}
/* Hover Effects */
.share-icon:hover {
transform: scale(1.1); /* Subtle hover effect */
}
/* Mobile Styling */
@media (max-width: 574px) {
.share-icon {
width: 50px; /* Smaller size for mobile */
height: 50px;
font-size: 20px;
}
.share-icon::before {
width: 70px; /* Adjust snow pile size for mobile */
height: 15px;
}
}
“Reminder: When copying and pasting code from our blog, ensure that you adjust it to fit your website’s specific requirements. This code is optimized for our provided HTML structure and designed specifically for Squarespace websites. To get the full functionality, remember to include the JavaScript in your site’s footer and apply the CSS in your Custom CSS section. If you need assistance or further guidance, consider subscribing for personalized support! Dont’t forget to not put my comments in the code, as well as to watch out for badly copied content! Good thing about Squarespace is that it always warns if the code has a mistake.
Applying the CSS
1. Go to your Squarespace Dashboard.
2. Navigate to Design > Custom CSS.
3. Paste the desired CSS styles from above.
4. Save your changes.
By combining our custom JavaScript and these stunning CSS designs, your Squarespace website will not only solve the problem of missing social sharing buttons but also shine with a festive glow this holiday season. Stay tuned for more updates and designs to make your website unforgettable! 🎄✨
