---
title: "Animated Corners Btn — Free Framer component · Best of Framer"
description: "Free Framer component · by Troy Miller · Text. Animated Borders Button"
canonical: "https://framer.elliotli.dev/component/animated-corners-btn"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Animated Corners Btn

# Animated Corners Btn

Animated Borders Button

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

![Animated Corners Btn preview image 1](https://framer.elliotli.dev/og/component/animated-corners-btn/f45240a18e4f3110/1600x1200.jpg)

## Summary

Animated Borders Button

## Description

Animated Corner Bracket Button

A sleek, modern button component featuring a unique corner bracket reveal animation.

## Features

**Stunning Hover Animation**

-   Corner brackets \[ \] in default state create a minimalist, sophisticated look
    
-   On hover, vertical and horizontal bars smoothly animate away to reveal the full border
    
-   Sequential animation timing (vertical bars first, then horizontal) creates a polished, professional effect
    
-   Smooth 0.3s ease-in-out transitions for a premium feel
    

**Fully Customizable**

-   **Text & Typography**: Full Framer font picker with family, weight, and size controls
    
-   **Colors**: Customize text color, border color, and background independently
    
-   **Spacing**: Professional padding control with single or per-side values
    
-   **Border**: Adjustable border width from 1-10px
    
-   **Cursor**: Choose from 12 cursor styles including pointer, grab, zoom, and more
    
-   **Links**: Add URLs with optional new tab opening
    

**Professional Quality**

-   Optimized animations using React state management
    
-   Clean, maintainable code structure
    
-   Works seamlessly in Framer projects
    

Simply drag and drop onto your canvas, customize through the properties panel, and watch your design come to life with this premium animated button component.

For design work, questions, or help, please reach out at [https://www.fireislanddesign.com/](https://www.fireislanddesign.com/)

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

-   All · #4385

## Details

- **Author**: Troy Miller
- **Published**: 2026-01-07
- **Updated**: 2026-06-12
- **Added**: 2025-12-24
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing