Donate button examples & downloads for nonprofits

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 show you some great examples from nonprofits as well as give some basic template donation button images for you. 

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 users can find it, don’t make users search for the donate button. 
  • Make it visible. Consider contrast with the background when choosing a color, use a contrast checker when in doubt. Remember 8% of men and .5% of women are colorblind but 100% of them  could be potential donors. 

Nonprofit Donate Button Examples

Charity: Water


What we like: Simple and consistent design that 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

Charity: Water use of donate button

How Charity: Water lays out their top nav donate button.

Buttons turn white when there is a background image.

When the page scrolls down the donate button changes blue and follows down the page. 

American Cancer Society


What we like: Simple consistent layout in top right with great contrast. 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 really like this. One consideration would be to add a “fundraise” button option similar to charity water. 

Button element

Cancer Society donate button element

How the donate button appears

Top of site with donate button


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 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 element. When scrolling down the page the menu bar continues and leaves the donate button behind.

Button element
UNICEF donate button element

How the donate button appears

UNICEF website layout with donate button

World Animal Projection


What we like: Great contrast with the dark orange against white background and reinforces the brand color. Large button element that lives in the consistent top right location across 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. Though this would hurt the great clean look but might 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

We recommend playing with these in a tool like, but you are welcome to just pick one of the ones we’ve created here. Add 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)