Ticket Button
This component is designed to turn a simple call-to-action into a more engaging interaction. Inspired by the tactile feel of a real ticket, the button features a split-on-hover effect where the text and icon subtly separate, creating a sense of anticipation and making the interaction feel more intentional.
Built with flexibility in mind, you can easily adapt it to fit your design system or brand style. The component comes with customizable properties, allowing you to control the content and appearance without touching the core interaction.
Button Title — Update the main label to match your context
Background Color (Default & Hover) — Adjust colors for both states to fit your brand
Link Target — Set the destination URL for the button action
For a more realistic ticket feel, make sure to match the dash (perforation) color with your default background color. This small detail helps maintain the illusion when the button splits on hover.
Share your build
If you build something cool with it, post it in X and tag me @donyalhadi. I’d love to see what you create!
Dony Alhadi
