---
title: "Donate Button (Glow) — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. Glowing gradients and smooth hover"
canonical: "https://framer.elliotli.dev/component/donate-button-glow"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Donate Button (Glow)

# Donate Button (Glow)

Glowing gradients and smooth hover

[View on Framer](https://framer.com/marketplace/components/donate-button-glow/?via=elliot-li)

![Donate Button (Glow) preview image 1](https://framer.elliotli.dev/og/component/donate-button-glow/c2067df8bae9ab98/1600x1055.jpg)

## Summary

Glowing gradients and smooth hover

## Description

## **About**

**Gradient Donate Button** is a high-converting, glowing call-to-action component designed to capture attention effortlessly. On hover, its custom dynamic linear gradient shifts smoothly while maintaining an inner and outer ambient glow effect—making it the ideal micro-interaction to boost click-through rates and engagement.

## **What it does**

-   **Smooth Gradient Shift:** On hover, the background gradient smoothly transitions across the button surface via a fluid 0.8s CSS transition.
    
-   **Ambient Glow & Depth:** Features dual-layer inset and drop shadows tuned to match your chosen gradient colors, creating a vibrant glowing backlight effect.
    
-   **Static Canvas Optimization:** Automatically detects SSG/SSR and static canvas rendering using to guarantee zero flickering or unwanted animation state shifts while editing inside Framer.
    
-   **Accessible & Motion-Friendly:** Built with focus-visible accessibility outlines and automatic fallbacks for users
    

## **What you can customize**

Full control directly from the Framer Canvas properties panel — no coding required:

-   **Text** — Button label (e.g. _"Donate now"_, _"Support Project"_)
    
-   **Font** — Choose any system or web font
    
-   **Font Size** — Adjustable font size in pixels (default: `16px`)
    
-   **Weight** — Select typography weight (`Regular`, `Medium`, `SemiBold`, `Bold`, `ExtraBold`)
    
-   **Text Color** — Custom color for label and focus outline (default: `#ffffff`)
    
-   **Glow Color 1** — Primary highlight color for the gradient & inset glow (default: `#60C9FF`)
    
-   **Glow Color 2** — Secondary deep color for the gradient shift (default: `#1F75FF`)
    
-   **Radius** — Border corner radius adjustment (default: `8px`)
    
-   **Width & Height** — Explicit dimensions or dynamic auto sizing
    
-   **Padding** — Visual control over top, right, bottom, and left spacing
    

## **Need help?**

Questions or feedback? Reach me anytime at [**karimsaif010@gmail.com**](mailto:karimsaif010@gmail.com) or on X [@karimsaif0](https://x.com/karimsaif0).

## Rank history [How rankings work →](/terms#rankings)

-   All · #6011

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-22
- **Updated**: 2026-07-23
- **Added**: 2026-07-22
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow