---
title: "3D Tilt Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Aidan Looker · Buttons. What is 3D Tilt Button?"
canonical: "https://framer.elliotli.dev/component/3d-tilt-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/3D Tilt Button

# 3D Tilt Button

Interactive tilting button with glows.

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

![3D Tilt Button preview image 1](https://framer.elliotli.dev/og/component/3d-tilt-button/5df550fdd8f14b6b/1600x1200.jpg)

## Summary

What is 3D Tilt Button?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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](mailto:contact@teampixel.com.au)

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

-   All · #6450

## Details

- **Author**: Aidan Looker
- **Published**: 2026-04-02
- **Updated**: 2026-06-13
- **Added**: 2026-03-25
- **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