---
title: "Keycap3D — Free Framer component · Best of Framer"
description: "Free Framer component · by Catalystco · Buttons. Give your website a tactile, premium feel with Keycap3D, an interactive 3D button component for Framer inspired by modern keyboard keycaps."
canonical: "https://framer.elliotli.dev/component/keycap3d"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Keycap3D

# Keycap3D

Interactive Button

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

![Keycap3D preview image 1](https://framer.elliotli.dev/og/component/keycap3d/f841b54f1c5c46aa/1600x1200.jpg)

## Summary

Give your website a tactile, premium feel with Keycap3D, an interactive 3D button component for Framer inspired by modern keyboard keycaps.

## Description

Give your website a tactile, premium feel with **Keycap3D**, an interactive 3D button component for Framer inspired by modern keyboard keycaps. Designed with smooth hover and press animations, this component instantly adds depth and personality to landing pages, portfolios, SaaS websites, product showcases, and creative projects.

Built with flexibility in mind, every important element is fully editable directly inside Framer. Customize the button label, typography, font size, colors, corner radius, padding, and overall appearance without touching a single line of code. Whether you're creating a minimal interface or a bold, playful design, Keycap3D adapts to your style in just a few clicks.

### Features

-   Interactive 3D keycap animation
    
-   Fully customizable colors
    
-   Editable button label
    
-   Editable font family
    
-   Adjustable font size
    
-   Custom text color
    
-   Adjustable border radius
    
-   Customizable padding
    
-   Easy drag-and-drop setup
    
-   Built entirely for Framer
    
-   No coding required
    

### Fully Editable

Keycap3D is designed to be completely customizable. Easily adjust:

-   Button Text
    
-   Font Family
    
-   Font Size
    
-   Text Color
    
-   Corner Radius
    
-   Button Padding
    
-   Overall Component Styling
    

Everything can be edited directly from Framer's Properties Panel, making it simple to create countless button styles that match your brand or design system.

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

-   All · #4801

## Details

- **Author**: Catalystco
- **Published**: 2026-07-20
- **Updated**: 2026-07-20
- **Added**: 2026-07-20
- **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