---
title: "CyberpnkGlitchButton — Free Framer component · Best of Framer"
description: "Free Framer component · by Creative Apes · Buttons. Retro CRT Glitch Button for Framer"
canonical: "https://framer.elliotli.dev/component/cyberpnkglitchbutton"
---

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

# CyberpnkGlitchButton

Retro CRT Glitch Button for Framer

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

![CyberpnkGlitchButton preview image 1](https://framer.elliotli.dev/og/component/cyberpnkglitchbutton/bcebac2df5bf73da/1600x1200.jpg)

## Summary

Retro CRT Glitch Button for Framer

## Description

## Elevate Your UI with the Cyberpunk Glitch Button

The Cyberpunk Glitch Button is not just a UI element; it is a cinematic experience designed for high-end digital environments. Built on a custom **CRT Flicker Engine**, this component simulates the raw, electrifying energy of vintage hardware while maintaining the fluid performance of modern web standards. Whether you are building a gaming hub, a futuristic tech portfolio, or an experimental landing page, this button ensures every user interaction feels intentional and high-octane.

### The Science of the Glitch

Unlike standard CSS transitions, this component utilizes a sophisticated keyframe-based displacement logic. On hover, the text layer physically deconstructs into independent **Red and Cyan channels** using kinetic RGB splitting. This creates a realistic "data-glitch" effect that mimics the misalignment found in cathode-ray tube monitors.

### CRT Flicker Engine & Smart Scanlines

To truly capture the cyberpunk aesthetic, the button features a built-in luminosity pulsator. This engine creates organic brightness fluctuations that prevent the UI from feeling static. Additionally, the **Smart Scanline** system intelligently detects dark backgrounds to apply horizontal overlays, adding a layer of depth and texture that makes your buttons look like they were pulled straight from a hacker's terminal.

### Full Creative Control

You don't need to touch a line of code to make this button yours. With extensive Property Controls, you can:

\- **Adjust Glitch Intensity:** Control the amplitude of the text shattering effect.

\- **Modify Flicker Speed:** Set the tempo of the animation to match your brand's energy.

\- **Toggle Cyberpunk Mode:** Instantly switch between a clean, minimalist button and the full experimental engine.

\- **Smart Theming:** Customize neon borders, bloom effects, and background colors with ease.

### Use Cases

\- **Gaming & Esports:** Create CTA buttons that look like part of a game's HUD.

\- **Tech Portfolios:** Showcase your expertise in motion design and high-interaction development.

\- **Product Launches:** Use for primary 'Enter' or 'Initialize' triggers to set a strong thematic tone.

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

-   All · #7111

## Details

- **Author**: Creative Apes
- **Published**: 2026-05-31
- **Updated**: 2026-04-16
- **Added**: 2026-04-06
- **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