Hotkey CTA

Hotkey CTA is a premium call-to-action button for Framer with a built-in keycap hint, the detail modern software tools use. Two variants, Primary and Secondary, each with hover and pressed states. It's built from native Framer layers, so you can click into any part and edit it like the rest of your site. No code, no setup.

Default buttons blend in. Hotkey CTA gets noticed. On hover the button glows gold and the keycap lifts. On click the key presses down, so every press feels real.

WHAT YOU GET

- Primary variant: bright and high-contrast, for your main action

- Secondary variant: dark glass with a gold outline, for supporting actions

- Hover and pressed states on both variants

- Keycap badge that lifts on hover and presses on click

- Editable label and key text from the properties panel

- A switch to hide the keycap for a plain button

- Color and text styles included, so restyling is quick

- Clean, clearly named layers

MAKE IT YOUR OWN

Type any key into the keycap: ↵, ⌘K, Ctrl K, or a short badge like New or Free. Prefer a plain button? Switch the key off.

GOOD TO KNOW

The keycap is a visual hint. To make a real keyboard shortcut work, add a shortcut component such as Key Master to your page.

HOW TO USE

1. Add Hotkey CTA to your project.

2. Drop an instance anywhere.

3. Edit the label and key, choose Primary or Secondary, publish.

Perfect for SaaS, AI and developer-tool sites: hero sections, pricing tables, product pages and sign-up forms.

Built by Framevia | The Visual Pratik.