3D Tilt Button

What is 3D Tilt Button?

A premium interactive button component that responds to cursor movement with 3D perspective transforms. On hover, the button tilts toward the cursor while a holographic border shifts in real time, a specular light glint tracks the mouse position, and the text blooms with a soft glow. Ideal for hero sections, pricing CTAs, portfolio landing pages, and any high-impact touchpoint that needs to feel alive.

Core Features

• Cursor-reactive 3D perspective tilt with adjustable intensity

• Holographic gradient border that shifts angle based on cursor position

• Specular glint highlight that follows the mouse across the button surface

• Dynamic shadow that shifts direction with the tilt angle

• Content lift, holographic text glow, and elastic icon scale on hover

• Concentric expanding ring ripple on click

• Five curated color presets plus a fully customizable theme

• Eight built-in icon options with left or right placement

• Spring-physics press animation on click

Controls inside Framer

General

• Label

• Link

• Preset (Prism, Solar, Ocean, Neon, Monochrome, Custom)

Icon

• Icon (None, Arrow Right, Arrow Diagonal, Chevron, Plus, Sparkle, Lightning, Star)

• Icon Side (Left / Right)

Colors (Custom preset)

• Background

• Border Color 1

• Border Color 2

• Text

• Glint Highlight

Effects

• 3D Tilt (0-25 degrees)

• Hover Glow (On / Off)

• Click Ripple (On / Off)

Sizing

• Padding X

• Padding Y

• Radius

• Font Size

Typography

• Font

Best use cases

• Hero section call-to-action buttons that demand attention

• SaaS and product landing page conversion buttons

• Portfolio and agency sites seeking a premium interactive feel

• Pricing page CTAs where perceived quality drives clicks

Drop it onto your canvas, pick a preset, and ship a button that feels handcrafted — in under a minute.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au