ID

Split Reveal Button

ID

Split Reveal Button

ID

Split Reveal Button

Compatibility

Framer

Compatibility

Framer

Compatibility

Framer

Features

Inspired by the call-to-action buttons on tuxkarma.co.

Initially presented as a unified design, this button features left-aligned text and a right-aligned arrow.

Hidden beneath are two separate frames: one dedicated to the text and the other to the arrow icon. Their absolute positioning creates a singular visual unit.

However, on hover, the text frame narrows to its inherent content width, displaying the arrow's separate frame.

This subtle transformation gives an illusion of the button dividing, revealing its dual-component nature.

Features

Inspired by the call-to-action buttons on tuxkarma.co.

Initially presented as a unified design, this button features left-aligned text and a right-aligned arrow.

Hidden beneath are two separate frames: one dedicated to the text and the other to the arrow icon. Their absolute positioning creates a singular visual unit.

However, on hover, the text frame narrows to its inherent content width, displaying the arrow's separate frame.

This subtle transformation gives an illusion of the button dividing, revealing its dual-component nature.

Features

Inspired by the call-to-action buttons on tuxkarma.co.

Initially presented as a unified design, this button features left-aligned text and a right-aligned arrow.

Hidden beneath are two separate frames: one dedicated to the text and the other to the arrow icon. Their absolute positioning creates a singular visual unit.

However, on hover, the text frame narrows to its inherent content width, displaying the arrow's separate frame.

This subtle transformation gives an illusion of the button dividing, revealing its dual-component nature.

©Erman Malak 2023

All Rights Reserved.