---
title: "Cool Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Rayan Yasser · Buttons. About this Component Cool button creates a visually striking 3D button where the top face appears to sit on a raised base with a deep shadow."
canonical: "https://framer.elliotli.dev/component/cool-button"
---

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

# Cool Button

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

![Cool Button preview image 1](https://framer.elliotli.dev/og/component/cool-button/c4d51fc3d0d1b99f/1600x1200.jpg)

## Summary

About this Component Cool button creates a visually striking 3D button where the top face appears to sit on a raised base with a deep shadow.

## Description

## About this Component

Cool button creates a visually striking 3D button where the top face appears to sit on a raised base with a deep shadow. The component uses Framer Motion to animate vertical depth and a sliding shine bar, giving each interaction a satisfying, arcade-style feel.

## Key Features

-   **Layered 3D depth:** Uses separate shadow, middle, and top layers with offsets and outlines to build a convincing stacked 3D effect that reads clearly even on darker layouts.
    
-   **Press animation:** The top layer animates down by several pixels on pointer/tap events, visually “meeting” the middle layer to reinforce the sense of physical press feedback.
    
-   **Shine highlight:** A skewed translucent strip sweeps across the button face on press, adding a dynamic specular highlight that emphasizes motion and gloss.
    
-   **Typography controls:** Integrated Font control exposes family, size, weight, line height, letter spacing, and alignment.
    
-   **Color customization:** Separate controls for top, middle, shadow, outline, and text colors let the button adapt to bright, dark, or branded palettes while preserving the 3D structure.
    
-   **Link + events:** Supports an optional URL with new-tab toggle and an on top event handler, making it suitable for navigation, primary CTAs, or analytics-tracked interactions.
    

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

-   All · #5097

## Details

- **Author**: Rayan Yasser
- **Published**: 2025-12-11
- **Updated**: 2026-01-05
- **Added**: 2025-12-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