---
title: "Cyberpunk Button — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Roman Salakhov · Buttons. Bring a futuristic interface to your projects with an interactive cyberpunk-inspired button component Cyberpunk Button combines…"
canonical: "https://framer.elliotli.dev/component/cyberpunk-button"
---

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

# Cyberpunk Button

Cyberpunk animated button

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

![Cyberpunk Button preview image 1](https://framer.elliotli.dev/og/component/cyberpunk-button/87ade9aa12ccd7b7/1600x1200.jpg)

## Summary

Bring a futuristic interface to your projects with an interactive cyberpunk-inspired button component Cyberpunk Button combines animated border beams, a matrix-style text glitch…

## Description

**Bring a futuristic interface to your projects with an interactive cyberpunk-inspired button component**

Cyberpunk Button combines animated border beams, a matrix-style text glitch effect and customizable geometric corners to create eye-catching hover interactions without sacrificing usability.

**Features**

\* Animated border beam effect!

A glowing pulse travels around the button border when hovering, creating a dynamic sci-fi feel.

\* Matrix-inspired text glitch!

Characters briefly transform into random symbols before revealing the original text from left to right.

\* Custom corner cuts!

Independently enable or disable each corner cut to create countless geometric variations.

\* Full color customization!

Control background, border, hover states, beam color and text colors directly from the Framer properties panel.

\* Optional icon support!

Add an icon and adjust spacing and icon size with ease.

\* Advanced typography controls!

Customize font family, size, weight, letter spacing and other text properties.

\* Border toggle!

Enable or disable the border with a single switch.

\* Smooth hover transitions!

Animated color changes provide a polished and responsive experience

**Property Controls**

-   Text
    
-   Icon
    
-   Background Color
    
-   Border Color
    
-   Hover Border Color
    
-   Beam Color
    
-   Text Color
    
-   Hover Background
    
-   Hover Text Color
    
-   Border On / Off
    
-   Cut Size
    
-   Individual Corner Controls
    
-   Gap
    
-   Icon Size
    
-   Advanced Typography Controls
    

**Perfect for:**

-   Cyberpunk websites
    
-   Gaming interfaces
    
-   SaaS landing pages
    
-   Portfolios
    
-   Tech startups
    
-   Sci-fi inspired UI
    
-   Creative projects
    

Designed for Framer creators who want buttons with personality and premium interactions.

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

-   All · #9372

## Details

- **Author**: Roman Salakhov
- **Price**: $3.00
- **Published**: 2026-06-16
- **Updated**: 2026-06-26
- **Added**: 2026-06-16
- **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