---
title: "Throw Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/throw-button"
---

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

# Throw Button

Animated Arrow Badge

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

![Throw Button preview image 1](https://framer.elliotli.dev/og/component/throw-button/964bf074b0971500/1600x1053.jpg)

## Summary

Animated Arrow Badge

## Description

## About

**Custom Draw Fill Button** is a sleek, highly customizable interactive CTA component for Framer. Built with fluid scale-transform overlays and smooth SVG icon rotations, it delivers a modern reveal effect on hover—perfect for landing pages, modern marketing sites, and portfolio hero sections.

## What it does

-   **Top-Left Draw Fill Reveal:** Triggers a smooth circular fill transition originating from the top-left corner on hover for both the main button pill and the optional icon badge.
    
-   **Animated Arrow Badge:** Features a rotating arrow icon (`0°` to `-45°` on hover) housed inside a circular container with spring-like bezier easing.
    
-   **Flexible Layout Options:** Toggles seamlessly between standard layout, reversed orientation (flipping text and icon order), or full-width flex alignment.
    
-   **Accessible & SSR Safe:** Built-in `useIsStaticRenderer` check prevents broken thumbnail previews in Framer Canvas/Marketplace while providing explicit ARIA states, focus outlines, and full keyboard interaction support.
    

## What you can customize

All aspects are exposed via Framer’s Property Panel:

-   **Text & Links:** Set custom label text, attach links, toggle external navigation, and manage disabled states.
    
-   **Typography:** Full font selection controls (family, weight, style) along with adjustable font size.
    
-   **Colors & Theme:** Independent color controls for default vs. hover states across button background, text, icon background, icon stroke, and borders.
    

## Connect

Made with 💛 by [@Karim Saif](/community/creator/@karim-saif/)

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

-   All · #5582

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-24
- **Updated**: 2026-07-24
- **Added**: 2026-07-24
- **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