Cyberpunk Button

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.