ID

Arc Text Hover Button

ID

Arc Text Hover Button

ID

Arc Text Hover Button

Compatibility

Framer

Compatibility

Framer

Compatibility

Framer

Features

This button is not just a clickable element; it's a design experience. Designed using the Arc Text component by @benjaminnathan.

In its default state, it appears as a simple rounded frame with a centered right-pointing arrow. However, hidden within are two additional layers, initially set to invisible with 0 opacity. The first hidden layer is another round frame, originally 1x1 px, and the second is a rotating arc text.

When the user hovers over the button, the magic happens: both concealed layers reveal themselves, with the round frame growing and filling the entire button, creating an expanding visual effect, while the arc text brings an added layer of dynamic engagement.

This button is a creative way to add interactive flair and unexpected delight to any interface.

Features

This button is not just a clickable element; it's a design experience. Designed using the Arc Text component by @benjaminnathan.

In its default state, it appears as a simple rounded frame with a centered right-pointing arrow. However, hidden within are two additional layers, initially set to invisible with 0 opacity. The first hidden layer is another round frame, originally 1x1 px, and the second is a rotating arc text.

When the user hovers over the button, the magic happens: both concealed layers reveal themselves, with the round frame growing and filling the entire button, creating an expanding visual effect, while the arc text brings an added layer of dynamic engagement.

This button is a creative way to add interactive flair and unexpected delight to any interface.

Features

This button is not just a clickable element; it's a design experience. Designed using the Arc Text component by @benjaminnathan.

In its default state, it appears as a simple rounded frame with a centered right-pointing arrow. However, hidden within are two additional layers, initially set to invisible with 0 opacity. The first hidden layer is another round frame, originally 1x1 px, and the second is a rotating arc text.

When the user hovers over the button, the magic happens: both concealed layers reveal themselves, with the round frame growing and filling the entire button, creating an expanding visual effect, while the arc text brings an added layer of dynamic engagement.

This button is a creative way to add interactive flair and unexpected delight to any interface.

©Erman Malak 2023

All Rights Reserved.