---
title: "ChromeButton — Free Framer component · Best of Framer"
description: "Free Framer component · by Spyridon Merkouris · Buttons. What it does ChromeButton gives your Framer site a cinematic, high-end call-to-action button with a reflective chrome/glass…"
canonical: "https://framer.elliotli.dev/component/chromebutton"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/ChromeButton

# ChromeButton

Chrome magnetic CTA button

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

![ChromeButton preview image 1](https://framer.elliotli.dev/og/component/chromebutton/80a0f9a33cc8e144/1600x1200.jpg)

## Summary

What it does ChromeButton gives your Framer site a cinematic, high-end call-to-action button with a reflective chrome/glass surface and magnetic pointer interaction.

## Description

### What it does

**ChromeButton** gives your Framer site a cinematic, high-end call-to-action button with a reflective chrome/glass surface and magnetic pointer interaction. It reacts to the cursor with 3D tilt, moving reflections, cursor-tracked highlights, shimmer, ripple feedback, and optional particle sparks, making a simple CTA feel like a premium interactive object.

### Features

Includes a polished chrome surface built from layered gradients, reflections, rim highlights, inner glow, glass sheen, surface noise, liquid sweep, shimmer, and specular drift. Magnetic tilt reacts to the pointer using spring-based Framer Motion values. Cursor-tracked highlights move across the button surface as visitors hover. Press interactions create tactile scale depth, optional ripple feedback, and lightweight particle sparks. Theme presets include Chrome, Purple, Emerald, Sapphire, Rose, and Gold, plus a custom color mode. Custom controls include base color, metal color, highlight color, glow colors, metal intensity, reflection intensity, motion strength, outer glow, glow intensity, radius, font, text color, text size mode, fixed or frame-fill sizing, and custom width/height. Optional icons include arrow, sparkle, bolt, and play, with left or right positioning. Loading state replaces the icon with a spinner and loading label. Disabled state reduces opacity and blocks interaction. The component can render as a button or as a link with optional new-tab behavior. Motion is disabled in Framer’s static renderer and respects reduced-motion preferences.

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

-   All · #6947

## Details

- **Author**: Spyridon Merkouris
- **Published**: 2026-06-17
- **Updated**: 2026-06-29
- **Added**: 2026-06-17
- **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