Best donate buttons for nonprofits: Examples & downloads

Digital MediaWebsite Design + Optimization

Of course, systems like PayPal have their standard yellow buttons, as do many of the fundraising platforms out there. But sometimes you need to create a custom button for your website or Twitch streaming donation page. This guide will help you get inspired by some of the best donate buttons from nonprofits as well as share some basic donation button templates.

paypal donate button

Design rules for donate buttons

  • Keep it simple. Less is more in design. Use familiar language to avoid confusion.
  • Keep it consistent. Make the style and location standard so your supporters can find it easily. Don’t make users search for the donate button. 
  • Make it visible. Consider contrast with the background when choosing a color, and use a contrast checker when in doubt. Remember—8% of men and 0.5% of women are colorblind, but 100% of them could be potential donors. 

Nonprofit Donate Button Examples

Charity: Water 

What we like: With a simple and consistent design, Charity: Water definitely has one of the best donate buttons. It also works with the image-focused site. There are two asks: to give directly, and to fundraise for the organization.

What we’d change: The contrast with the white donate version that shows when there is a picture in the background makes it hard to see. Though, they do have a scrolling donate button that solves the contrast issue.

Button element

donate button example

How the donate button appears

The screenshot below shows us how Charity: Water lays out their top nav donate button. The buttons turn white when there is a background image.

Charity: Water use of donate button

When users scroll down the page, the donate button changes blue and follows them, so the ask is omnipresent. 


American Cancer Society

What we like: American Cancer Society’s donate button employs a simple consistent layout in the top right of their site, with great contrast. It also uses the same branded red color as the logo, and gives a generous amount of space for the element.

What we’d change: Not much, we definitely think this qualifies as one of the best donate buttons out there. One consideration would be to add a “fundraise” button option or other asks, similar to charity water. 

Button element

Cancer Society donate button element

How the donate button appears

Top of site with donate button


Online Course

Online Fundraising Essentials

Build a successful online fundraising strategy from the ground up


What we like: Clear contrast of white on blue and the top right location doesn’t make users hunt for the donate option. 

What we’d change: The orange-colored text of the donate button conflicts with the color scheme and is a little tough for contrast, failing WCAG. The top right area is a little crowded with the other languages, press, and contrast elements. When scrolling down the page, the menu bar continues and leaves the donate button behind.

UNICEF donate button element

Button element

How the donate button appears

UNICEF website layout with donate button


World Animal Protection

What we like: The great contrast of World Animal Protection’s dark orange donate button against the white background is an automatic win, plus it reinforces the brand color. This is a large, easy-to-find button element that lives consistently in the top right part of the site and follows the user down the page. 

What we’d change: Not much. We’d consider testing a more common “DONATE” text, and possibly test adding a second monthly gift or fundraise button option. This might hurt the great clean look, but it could raise more money! 

Button element

WAP Donate Button element

How the donate button appears

WAP top website with donate button

Donate button follows as the page scrolls.

WAP scroll down donate button


Download sample donate buttons

Now that you’ve learned from the best donate buttons out there, are you ready to create your own? We recommend playing with these donate button templates in a tool like Canva, but you’re welcome to just pick one of the ones we’ve created here. Use these buttons wherever you need a fun donate button addition to graphics. And yes, we know that the yellow and white combinations aren’t good for contrast or WCAG compliant unless your background is very dark. 

Donate button image

Simple donate button image (right click to download)

Support donate buttons to download

“Support” donate button images (right click to download)

Donate button with solid background

Solid background donate button (right click to download)

"support" donate button image designs

Support buttons with solid background (right click to download)