---
title: "Depth Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Matt · Buttons. Interactive buttons with real depth"
canonical: "https://framer.elliotli.dev/component/depth-button"
---

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

# Depth Button

Layered depth for every CTA

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

![Depth Button preview image 1](https://framer.elliotli.dev/og/component/depth-button/5f91fb8d6d78ebde/1600x1200.jpg)

## Summary

Interactive buttons with real depth

## Description

## What it does

Turns a simple button into a more playful and polished interaction with layered depth, directional shadows, animated hover movement, static press-style variants, outline styling, and optional glow. It is made to give your buttons more character, depth, and visual weight without making your design feel overloaded.

## What you can customize

Full control from the Framer panel: text, background color, text color, hover background color, hover text color, fill or outline style, shadow layers, shadow direction, shadow tone, animation type, glow, border radius, padding, and font. Everything is easy to adjust, responsive, and made to fit different layouts without touching code.

## Great for (examples)

Just a few ideas, use it anywhere you want a stronger and more polished CTA:

-   hero section buttons
    
-   SaaS landing pages
    
-   product launches
    
-   waitlist signups
    
-   pricing sections
    
-   portfolio websites
    
-   playful brand websites
    
-   modern contact buttons
    
-   template previews
    

## Share your build

If you ship something cool with it, post it on X and tag me [**@Matthias\_Oel**](https://x.com/Matthias_Oel), or send it over. I’d love to see what you create.

## Need help?

Questions or feedback? Reach me anytime: [**matthias@lmvision.de**](mailto:matthias@lmvision.de) or on X [**@Matthias\_Oel.**](https://x.com/Matthias_Oel)

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

-   All · #3245

## Details

- **Author**: Matt
- **Published**: 2026-06-07
- **Updated**: 2026-10-30
- **Added**: 2026-06-07
- **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