Move the edge
The label stays still. A conic highlight makes one continuous journey around the pill.
Radar Buttons
How I turned “Book a call” into a small signature interaction for nikhilballal.com. One moving edge, one clear invitation, and a deliberate balance between attention and restraint.
Book a CallThe live component / 3.2 second orbit
How I made the invitation feel alive
A portfolio gives the work room to speak. Its contact action still needs to be easy to find, even at the end of a long scroll.
The design direction was a radar signal: a point of light travelling around a stable object. We moved the emphasis onto the perimeter, where it could draw attention without disturbing the words.
The result is an NB original built from the site's existing bone, ink and signal-orange palette. Familiar as a button, distinctive in its behaviour.
Name the action
“Book a Call” and a calendar symbol tell you what comes next. The visual treatment supports that promise.
Leave room to breathe
A narrow orange trail, a translucent surface and a soft shadow keep the work in the foreground.
Anatomy of a signalSmall component precise decisions
1 px animated perimeter
52 px minimum desktop height / 48 px mobile
A continuous capsule
A 999 px radius removes corners from the orbit. Desktop padding is 12 px vertically and 16.8 px horizontally, with an 8.8 px icon-to-label gap at a 16 px root size.
Depth without weight
A translucent bone-to-white fill sits inside the border. A 20 px backdrop blur, 155% saturation and an inset highlight give the surface separation.
Keep the voice native
Bricolage Grotesque at weight 680 carries the action. The 15.04 px desktop label has −0.01 em tracking. JetBrains Mono annotates the system around it.
Bone ink signal
The orange that belongs to the perimeter is inspired by the brush metal orange on the iPhone 17 Pro. Ink belongs to the words. Bone belongs to the surface. Assigning each colour a job makes the component recognisably NB.
Bone
oklch(0.962 0.008 84)The portfolio's warm canvas
Ink
oklch(0.205 0.014 56)The readable action label
Signal
#F77E2DThe travelling perimeter highlight
Here’s THE INTERACTION LAB
The shipped orbit lasts 3.2 seconds. Hover lifts the button by 3 px; pressing brings it back to the surface. Keyboard focus gets a separate 3 px outline, so the orbit is never the only cue.
Preview only · the booking link is below
Try hover · Tab to focus · Press to respond
Idle
One linear orbit every 3.2 seconds. No moving text and no layout shift.
Hover and press
A 350 ms lift with the NB easing curve, then a return on press. The highlight gains intensity.
Reduced motion
The orbit stops when the operating system requests reduced motion. The label and focus affordance remain.
Designed beyond the first frame
The implementation uses a registered CSS angle and a layered background: the fill is clipped to the padding box, the radar trail to the border box. No video, image sequence or JavaScript animation loop is needed for the button itself.
A solid warm-white surface replaces transparency when backdrop filtering is unavailable or reduced transparency is requested. Fixed placement respects the device's safe areas. The calendar icon is decorative; the link's accessible name describes the booking action.
This case study documents the implemented design and its rationale. Conversion impact has not been measured; a future evaluation would compare booking completion, accidental taps and comfort with the motion.
