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.
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
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.
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
How the donate button appears
Online Course
Online Fundraising Essentials
Build a successful online fundraising strategy from the ground up
UNICEF
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.
Button element
How the donate button appears
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
How the donate button appears
Donate button follows as the page scrolls.
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.
Simple donate button image (right click to download)
“Support” donate button images (right click to download)
Solid background donate button (right click to download)
Support buttons with solid background (right click to download)