This is a dark-themed navigation link button with a bracketed monospaced index label. On hover, the background fills, the text slides right, and an arrow appears, creating a clean, directional interaction that fits dark portfolio and agency layouts.
Works on both dark and light backgrounds, just adjust the colors accordingly.
100% Native Framer: Built entirely without code
Paste the component onto your canvas. Double-click it and select "Unlink & Replace All".
You'll be taken into the component editor canvas, now return to the main canvas.
Use the property controls on the right sidebar to customize the title, index, colors, etc.
For deeper customization (typography, spacing, padding etc.), double-click the component to enter the component editor canvas.
If you’re new to Framer these tutorials will help you better understand Framer components:
Intro to Components by Framer.
Tutorial by Adam Sebesta
Variant: switch between available animation variants (There are also Tablet and Phone variants; switch to the appropriate variant on each breakpoint.)
Index: the bracketed label (e.g. [01])
Title: the link label text
Color: controls the index, title, and arrow color
Hover Fill Color: the background fill color on hover
Hover Fill Opacity: controls the opacity of the fill color on hover, don't go above 0.3, use only on "Flash Sweep" and "Flash Only" variants.
Link: attach a URL or page link
New Tab: opens the link in a new tab
Smooth Scroll: enable smooth scrolling behavior
The button width can be set to Fixed and you can enter any value you need. On mobile, switching to Fill is recommended so the button stretches to fit the screen.
If you have any questions about the component, feel free to email me at: sl.admantos@gmail.com
Admantos
