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.
Preview URL
Preview URL
Preview URL
Remix URL
Remix URL
Remix URL
©Erman Malak 2023
All Rights Reserved.