---
title: "Pixel Button Pro — Free Framer component · Best of Framer"
description: "Free Framer component · by Shouvik Biswas · Buttons. Interactive Pixel Button"
canonical: "https://framer.elliotli.dev/component/pixel-button-pro"
---

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

# Pixel Button Pro

Interactive Pixel Button

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

![Pixel Button Pro preview image 1](https://framer.elliotli.dev/og/component/pixel-button-pro/94c82a54385623ba/1600x1200.jpg)

## Summary

Interactive Pixel Button

## Description

A highly customizable button designed to trigger sequential pixel animations across 12 distinct trajectories and refine your interface's call-to-action hover states.

## Features

-   12 distinct directional reveal patterns for orchestrating the exact choreographic flow of the entrance.
    
-   Adjustable animation pacing for controlling the kinetic rhythm and stagger speed of the active hover state.
    
-   Configurable cell resolution for scaling the visual density and texture of the grid structure.
    
-   Variable grid spacing for defining the structural separation between individual active elements.
    
-   Custom fill hue for aligning the animated surface directly with your specific design system.
    
-   Base background color for establishing the foundational contrast behind the active grid layer.
    
-   Scroll-aware activation for ensuring animations only calculate and trigger when visible in the user's viewport.
    
-   Sub-pixel seam coverage for eliminating visual rendering artifacts when grid spacing is reduced to zero.
    
-   Fluid layout recalculation for adapting the grid matrix seamlessly to real-time container and window adjustments.
    
-   Configurable text labels for defining the exact call-to-action layered above the animated surface.
    
-   Scalable typography metrics for fine-tuning the visual weight and legibility of your primary message.
    
-   Independent text coloring for maintaining optimal visual contrast against the dynamic pixel background.
    
-   Directional padding controls for shaping the physical footprint and internal breathing room of the interaction area.
    
-   Variable corner rounding for softening the external geometry to align directly with your specific interface aesthetic.
    

## How to Use

-   Drop the component into your Framer canvas.
    
-   Set your CTA text, font, color and link.
    
-   Select and customize your reveal animation.
    
-   Publish your project to view your component live.
    

_Elevate every click into a fluid, tactile interaction._

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

-   All · #1166

## Details

- **Author**: Shouvik Biswas
- **Published**: 2026-06-28
- **Updated**: 2026-07-25
- **Added**: 2026-06-28
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything