Donate Buttons | Everything Your Nonprofit Needs to Know

Craig Grella
June 25, 2021

Donate buttons are crucial for driving conversions on your nonprofit website and to your overall fundraising strategy. Whether you incorporate donate buttons into your virtual fundraising forms, in emails, or as a simple call to action throughout your online and social assets, this guide will help you create a donate button that stands out and helps your organization raise the funds it needs to succeed.

FAQ about the Basics of Donate Buttons

Understanding the basics of donate buttons and what makes people click on them will help you design one that fits your site and converts at the highest rate.

What is a Donation Button?

A donation button, or donate button, is a clickable element on a website page that leads your viewer to another website page where they can make a donation to your organization.

Why should my nonprofit add a donate button to its website?

As your audience views your website pages or reads your emails, they learn more about your organization and mission. Examples of how your nonprofit helps its audience through stories of your impact will help convince those viewers that your organization is worthy of their donation. Donate buttons located in the right places help guide your audience to the place where they can finalize their donation.

What should my donation button say?

Donate buttons can be simple buttons with just simple text or graphical buttons with images or icons. The text you use should be concise — this will help optimize the button for mobile devices where many visitors will make their donations.

Popular options for the text of your donation button include:

  • Donate
  • Make a Donation
  • Donate Now
  • Donate today
  • Give Now

Text that’s vague will make it unclear as to what action you want prospects to take, and they’ll be unlikely to click the donate button if they’re not sure where it will lead them. From here, using graphics and icons helps your donation button stand out. You can add icons showing:

  • Thumbs up
  • Checkmarks
  • Chevrons or directional arrows
  • Dollar Signs
  • Credit cards

Featuring the right visual elements can help catch prospects’ eyes, which may inspire them to click through to your donation page. Just be sure your graphics don’t outshine the text, because that detracts from the purpose of the donate button.

Salsa Online Fundraising Demo

Where do you put a donate button on a website?

Donate buttons can be easily embedded into your site with the right fundraising tools and are a good fit on nearly any of your website pages. There are a few places they work particularly well. Your menu, which contains your organization’s logo and your website’s important page links, is usually the first thing people see when visiting your online home. Placing a donation button in your menu is a smart idea, especially if your menu sticks to the top of the browser window and is ever-present while your donors browse your site.

This donate button on the Organization for International Change is placed prominently in the menu.

Another great area for your donate button is under the menu on the homepage in an area called the hero. The hero area typically features a large, high-resolution image that is contextually relevant to what your organization does. Having your donate button featured prominently on your site will help drive conversions for those people who visit your site specifically to donate.

It’s always a good idea to put your donate button in areas that are likely to get high traffic. Some organizations put their donate button on their “Get Involved” page to grab the attention of those who are looking for ways to give back and who are much more likely to donate. Giving them quick access to your donate button is always a smart move.

Place your donation button on your ‘Get Involved’ page to inspire people to give.

If your nonprofit has a blog or posts news stories or press releases, adding donate buttons in a sidebar can grab the attention of your readers and encourage them to donate when they’re done reading your articles. You can also place a donate button underneath individual blog posts or press releases.

As readers get to the bottom of your website, you can snap them back to attention with a well-placed donate button in your footer. This section typically repeats throughout every page of your website and is often a place your audience will quickly look for important links and other contact information.

Add your donation button to the footer to capture users’ attention when they’re looking for important links and information.

Remember, any place where you are likely to get traffic on your website is a good place to feature a donate button. This is especially true when you are telling stories that elicit emotion and increase your readers' likelihood to donate.

Your donate button should ALWAYS lead to a donation form where viewers can quickly make their donation. Don’t send them to intermediate pages, give them more information than they need, or send them to external sites. All this does is slow down the process and make them more likely to abandon their donations.

You can learn more about creating your menu and nonprofit website homepage in our blog series on nonprofit website design.

The Definitive Guide to Nonprofit Websites CTA

How to Add a Donate Button to Your Nonprofit’s Website and Emails

Adding a donate button to your organization’s website or email newsletters is easy with fundraising software or a nonprofit CRM like Salsa Engage.

Step1: Create Your Fundraising Form

The first step is to create your fundraising form so you have something to link your donate button to.

Before creating your donate button, design your fundraising form.

You can follow our previous article How to Write a Fundraising Call to Action to learn more about the elements of successful fundraising calls to action. You can also follow our knowledgebase article on doing this inside of Salsa Engage.

Step 2: Embed Your Donate Button On Your Website

Once the form is created, you’ll grab a piece of code so you can embed the form or donate button on your website.

Use your software to generate code that you can use to embed the donate button on your site.

You’ll find detailed steps for embedding donate buttons on your site in our knowledge base article here.

Step 3: Include Your Donate Button In Your Emails

The same code can be used to create a donate button in your emails, which can then be used as calls-to-action for your email fundraising strategy. You can edit that button and configure it to more closely match your email themes and overall brand.

Best Practices to Make Your Donate Button Stand Out

Optimizing your donate buttons will convert more visitors into donors and help increase your overall fundraising totals. There are a few best practices you can employ to make your donate buttons stand out and grab attention.

  • Button Color - Keep your button color consistent with your overall website theme, but make it stand out against its background.
  • Button Shape - Again, tap into your existing theme. If you use round radius buttons elsewhere on the site, your donate buttons should use the same radius to be consistent.
  • Button Size - It should be big enough to fit the text with a little bit of padding to make the text easy to read, but not so big that it overshadows the rest of your content. Keep in mind, mobile donations are ever-increasing and your button should look as good on mobile devices as it does on desktops. As the viewer’s screen size shrinks, smaller buttons can be replaced with full-width buttons on mobile phones.
  • Button Font Size - It should be at least as big as the body text around the button, or a few points bigger. If you’re using 16pt font for your normal text, your button text should be 16pt or 18pt. You can also bold the text to draw more attention to it.
  • Button Font Color - The font color of your donate button text should stand out on top of the button. If you’re using a button with a solid background color, white button text works well. If you’re using a white or transparent background button, you can use a button text color that is complimentary with your theme.

Spending time optimizing these elements of your donate button will be well worth the effort in the long run. Otherwise, you risk having an unreadable button that doesn’t bring any value to your organization, which will directly detract from your fundraising potential.

13 Ways Nonprofits Can Build an Email List Download Button


Best Examples of Donation Buttons to Model Yours After

Great nonprofit fundraising software will give you the ability to create fundraising forms AND individual donate buttons that you can use on your website and your email newsletters. Systems like Salsa Engage allow you to create donate buttons in a visual builder and embed them virtually anywhere online.

Let’s take a look at a few examples from leading organizations.

American Institute for Cancer Research

American Institute for Cancer Research features a very creative section just under their homepage hero section that includes a beautifully designed donation button that fits their theme and also includes suggested dollar amounts and a place where the donor can enter a custom amount too.

Make sure your donation button fits your website theme like this example.

Food Allergy

FARE uses a donate button in their menu which, when hovered over, opens a graphical submenu with several donation options for the viewer to choose. Giving donors options is a nice way to let them exercise control over how their funds are directed.

This example shows how you can feature your donation button in your navigation menu.

Women’s Sports Foundation

The Women’s Sports Foundation uses a donation button that floats on the bottom of the web window and stays there as the viewer browses their site, making the button ever-present and easy to access.

The Women’s Sports Foundation features a donation button that stays in the bottom corner of the user’s window.

The Cure Starts Now

The Cure Starts Now, an organization fighting pediatric cancer, uses its homepage to show infographics and impact statistics in a graphical way that uses design and color to direct the viewer’s eye into a funnel that leads right to their donate button.

Use infographics to direct attention to your donate button.

Free Donation Buttons to Help You Get Started

Now that you know all there is to know about donate buttons, it’s time to create one and place it on your website. If you’re using Salsa Engage, you can follow the knowledge base article here to create a graphical donate button and embed it directly onto your website or use it in your email newsletter.

Salsa makes it easy to create and embed your donate button.

You can also use free graphics tools for nonprofits — like Canva.com, or the Button Optimizer — to create your donate button. Simply choose your own colors, add text, and download the CSS or a png image to embed on your own site.


Donate buttons are an essential part of every nonprofit’s fundraising strategy and, when used properly, become a complement to your design that will drive engagement and can help you accomplish your fundraising goals.

Post a note on Salsa’s Facebook or LinkedIn pages and show us your donate buttons and fundraising forms.

If you want to unlock more strategic fundraising tips, check out these additional resources:


6 Week Communication Roadmap for Nonprofit Events Image


Topics: Fundraising Top Posts
Get a Salsa Demo

Get a Personalized Demo Today!

Smart Engagment Tools for Today’s Nonprofits

Download Now!