3 Cool Styles For The Donate Button Squarespace Websites

Mar 18

Written By Toni Williams - Founder of The Square Genius

Your donation button Squarespace plays a crucial role in inspiring generosity. But let’s be honest, by default, it’s not the most eye-catching element on your site. If you want to make your Squarespace donation block more visually engaging and encourage more clicks, styling your button with custom CSS is a game-changer.

In this guide, I’ll show you three unique CSS Codes to transform your donation button Squarespace into a design feature that stands out:

✨ Shiny Gold Effect – Ideal for a premium, high-impact look.
🔘 Press Down Effect – A satisfying click animation for better UX.
💡 Soft Glow Effect – A subtle, elegant highlight to draw attention.

Plus, as a bonus, I’ve included styling tips to enhance the full donation block, helping you create a cohesive and engaging donation section.

Let’s dive in and give your Squarespace donations the stylish boost they deserve!

1. The Shiny Gold Effect

Add a shiny gold effect to the donate button on Squarespace. This gives that lovley feeling of a ‘gift’ and that’s exactly what your donors want to do. It also elevates the donation by making it feel extra special - which every donation is! On hover it creates an extra ‘glow’ too…

Copy and paste the below code to your Custom CSS area: Go to > Website > pages > scroll down to website tools > custom CSS then paste the below code.

/* Donation Button Styling */
.sqs-donation-block-container .button {
  box-shadow: 4px 4px 0px #000; /* More natural shadow */
  background: orange !important;
  border-radius: 10px !important;
  transition: all 0.2s ease-in-out; /* Slightly longer for smooth effect */
  padding: 10px 20px; /* Added padding for better appearance */
}

/* Button Hover */
.sqs-donation-block-container .button:hover {
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.6); /* Subtle shadow instead of removing */
  transform: translateY(3px);
  background: #ff8c00 !important; /* Slightly darker orange */
}

2. Press Down Button Effect

press down donate button Squarespace preview

I love this one! It creates a nice little ‘press’ effect when the user hovers. I think it makes it even more enticing for the viewer to click donate!

Add this to your Custom CSS area: Go to > Website > pages > scroll down to website tools > custom CSS then paste the below code.

/* Donation Button Styling */
.sqs-donation-block-container .button {
  box-shadow: 4px 4px 0px #000; /* Shadow */
  background: #ffa500 !important; /* Change button color */
  border-radius: 10px !important;
  transition: all 0.2s ease-in-out; /* Slightly longer for smooth effect */
  padding: 10px 20px; /* Added padding for better appearance */
}

/* Button Hover */
.sqs-donation-block-container .button:hover {
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.6); /* Subtle shadow instead of removing */
  transform: translateY(3px);
  background: #ff8c00 !important; /* Slightly darker color option */
}

3. Soft Glow Effect

donation button squarespace with glow effect

This one is great for a softer approach. It offers a delicate glow on hover keeping a nice subtle feel.

Add this to your Custom CSS area: Go to > Website > pages > scroll down to website tools > custom CSS then paste the below code.

/* Donation Button Soft Glow */

.sqs-donation-block-container .button{
  transform: scale(1.1);
  box-shadow: 0 1px 15px rgb(73, 78, 59, 0.5); /* Soft glow effect */
}

.sqs-donation-block-container .button:hover{
  transform: scale(1.1);
  box-shadow: 0 1px 15px rgb(255, 165, 0); /* Soft glow effect */
}

HINT: You may also want to remove the transparency on the hover effect of your buttons to get a cleaner look. If so, add this to your CSS code section in addition to which ever button style you have chosen...

/* Remove Trans on buttons*/

.primary-button-style-solid .sqs-button-element--primary:hover {

opacity: 1 !important;

}

.secondary-button-style-solid .sqs-button-element--secondary:hover {

opacity: 1 !important;

}

.secondary-button-style-solid .sqs-button-element--tertiary:hover {

opacity: 1 !important;

}

BONUS!!! Add More Styles To The Full Squarespace Donation Block

Want to change the border, font styles and colors of the Squarespace donation block too? Let’s do it!

Add this code to your Custom CSS area: Go to > Website > pages > scroll down to website tools > custom CSS then paste the below code.

To update your font change ‘Bebas Neue’ to your preferred font (Keep the font title in the brackets)

/* Donation Block */
.sqs-donation-block-container {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Shadow */
  padding: 15px; 
}

/* Radio Button Labels */
.sqs-donation-block-container .radio label {
  text-align: left !important;
  display: block; 
}

.sqs-donation-block-container .radio-label {
  font-size: 20px;
  font-family: 'Bebas Neue', sans-serif; 
  color: #000;
}

A well designed donation button on Squarespace can make all the difference in driving more support for your cause. Whether you go for a shiny gold shimmer, a soft glow, or an interactive press-down effect, these CSS styles will ensure your Squarespace donation block looks polished, professional, and ready to convert visitors into donors.

And don’t forget the bonus donation block styling included in this guide helps you go beyond just the button, making the entire section more engaging!

Try out these styles and let me know which one works best for your site. If you need any help applying them, feel free to reach out!

You might also be interested in my article on how to add a progress bar to show viewers how far you’ve got to reach your goals - whatever they be!

Did I help you? Consider buying me a coffee as thanks!

Latest Plugins!

Quick View

Sale Tag Squarespace Announcement Bar

Quick View

Squarespace Counter Plugin

Quick View

Squarespace Goal Progress Bar Plugin

For more cool Squarespace tips check out my blog, or sign up to my newsletter.

Check out my Squarespace Premium Plugins

Featured

Sale Tag Squarespace Announcement Bar

Squarespace Counter Plugin

Squarespace Goal Progress Bar Plugin

Featured

3 Cool Styles For The Donate Button Squarespace Websites

Add Your Own Custom Fonts in Squarespace

Create a Squarespace Vertical Video With CSS Code

5 Cool Squarespace Add to Cart Button Tricks

Toni Williams - Founder of The Square Genius

Hi, I’m Toni. My mission is to create powerful websites for charities, non profits and purpose-led organisations dedicated to making a positive impact on the environment, communities, animal welfare and many more. I am also a CSS enthusiast and love to create cool plugins for Squarespace websites.

https://www.thesquaregenius.com/author-toni-williams