Brand & Button Library — Nightbox LLC

① Aurum — molten gold liquid

The flagship — primary CTA

Liquid gold gradient with idle background-position drift and a traveling shimmer-sweep that fires on hover. Triple-layered shadow (inset highlight + inset shadow + double drop-shadow) for depth. Reserved for the highest-conversion CTAs only.

Use it for: "Install Free", "Get the Shield", "Submit Proposal"

.btn-lux .btn-aurum

🛡️ Install Free in 5 Minutes → Get the Free Shield

200% width gradient + 6s idle drift · 700ms shimmer sweep on hover · paused-on-hover idle

② Shield — dome silhouette + breathing halo

For everything defensive

SVG mask of a shield silhouette, gold-filled, with a breathing concentric ring (2.4s halo expansion). Dark radial-gradient background to make the shield pop.

Use it for: "Activate Shield", security CTAs, defensive postures

.btn-lux .btn-shield

Activate Cyber Golden Dome View Security Posture

Inline SVG via -webkit-mask · 2.4s halo expansion (scale 0.6→2.4, opacity 1→0)

③ Treasury — emerald + $ pulse

For EFTPS, taxes, fiscal actions

Verdant emerald gradient with a $ symbol in a circle that emits a pulsing glow ring (2.8s). Federal-revenue branding without resorting to American-flag clichés.

Use it for: "EFTPS receipts", "Treasury Direction Pledge", tax CTAs

.btn-lux .btn-treasury

View EFTPS Receipts Treasury Direction Pledge

Emerald gradient stack · $ in pulsing dot-glow ring · scale-up + glow-ring on hover

④ Mining — three animated PoQ tier dots

For PoQ, work-units, mining

Three gold dots on the right side, staggered 200ms each, that pulse-and-glow in sequence. Visualizes active proof-of-work computation.

Use it for: "Start Mining", PoQ session CTAs, work-unit displays

.btn-lux .btn-mining

3 dots × 1.4s pulse cycle · 200ms stagger · scale 1→1.4 + box-shadow glow at peak

⑤ Spec — code brackets that pull apart

For developer actions

Monospace label flanked by gold curly braces. On hover the braces translate apart 4px each (cubic spring-back), as if the code block opens up. Frosted-glass background.

Use it for: "Read the spec", "View JSON", machine-readable CTAs

.btn-lux .btn-spec

Read CGD spec View manifest-index.json PoQ protocol

JetBrains Mono · gold { } that translateX(-4px / +4px) on hover · spring-back ease 280ms

⑥ Federal — slow-rotating eagle seal

For federal program offices

Stylized eagle-seal disk that rotates at 18s/cycle (idle) and 6s/cycle on hover. Gold-rimmed, blue-core, navy gradient field. Government-grade without being kitsch.

Use it for: "Federal review request", "Contact program office"

.btn-lux .btn-federal

Federal Review Request Contact Program Office

Concentric radial gradients · 18s slow rotation idle · 6s on hover

⑦ Pirate — Cyber-Kryak callsign with wobble

For the unhinged AI duck persona

Cyrillic "Кря" badge in dashed box, rotating wobble between -10° and -4°. On hover the wobble accelerates to 0.8s/cycle and the whole button skews -1° for swagger.

Use it for: Cyber-Kryak content, pirate-mode toggles, easter eggs

.btn-lux .btn-pirate

3.6s wobble idle (4-keyframe) · 0.8s on hover · skewX(-1deg) at hover

⑧ Arrow-shoot — extending arrow on hover

For forward navigation

→ on the right side. On hover, padding-right grows, arrow slides toward right edge, letter-spacing on the arrow widens 4px. Looks like it's about to launch.

Use it for: "Continue", "Next step", forward-flow navigation

.btn-lux .btn-arrow-shoot

Continue to next step View the roadmap See all manifests

Frosted glass · arrow translateX + letter-spacing on hover · 320ms cubic spring

⑨ Frost — frosted glass with light beam

For secondary actions

High-blur backdrop-filter (20px + 160% saturation) with a 105° light beam that sweeps left-to-right on hover. Subtle and premium.

Use it for: "Learn more", "View source", neutral CTAs

.btn-lux .btn-frost

Learn more View source on GitHub

backdrop-filter blur(20px) saturate(160%) · 700ms light-beam sweep on hover

⑩ Cipher — hex chars that resolve to label

For cryptographic CTAs

Mono-typed label that fades to a fainter hex-style cipher on hover (0xPOQ / cafef00d / verified ✓). Like the label is being decoded in real time.

Use it for: HMAC verification, anchor checks, technical CTAs

.btn-lux .btn-cipher

verify pentest matrixverified ✓ check DNSSEC anchor0xPOQ deadbeef

JetBrains Mono · 280ms label crossfade · gold-border + ring on hover

⑪ Magnetic — conic-gradient border halo

For high-conversion CTAs

Solid gold gradient base. On hover, a conic-gradient border halo fades in and rotates continuously (3s/cycle). Looks like the button has its own gravitational field.

Use it for: Pricing CTAs, "Apply now", high-conversion paths

.btn-lux .btn-magnetic

Apply for federation listing Schedule federal briefing

conic-gradient mask trick · 3s rotation on hover · opacity fade-in 280ms

⑫ Canary — warrant-canary breathing

For transparency & canaries

Pale-yellow ground with a 🐤 chick that breathes (scale 1 → 1.12 → 1) at 1.6s/cycle, like a heartbeat. Reserved for warrant-canary, transparency, and surveillance-related actions.

Use it for: warrant canary, transparency reports, canary refreshes

.btn-lux .btn-canary

View Warrant Canary Refresh Canary (90d)

🐤 breathing 1.6s · pale-amber gradient base · transparency-themed

Side-by-side comparison

All twelve in one wall

Hover any one to see its individual personality. None of these share an animation, an accent color combination, or a use case.

🛡️ Aurum Shield Treasury Mining Spec Federal Pirate Arrow Frost Cipher0xPOQ Magnetic Canary