---
title: "Press Key Action — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Nabeel · Maps. About The Key Button component creates an interactive button that responds to both mouse clicks and keyboard presses."
canonical: "https://framer.elliotli.dev/component/press-key-action"
---

[Home](/)/[Components](/components)/[Maps](/components/category/maps)/Press Key Action

# Press Key Action

[View on Framer](https://framer.com/marketplace/components/press-key-action/?via=elliot-li)

![Press Key Action preview image 1](https://framer.elliotli.dev/og/component/press-key-action/bd071b0645075d5b/1600x1200.jpg)

## Summary

About The Key Button component creates an interactive button that responds to both mouse clicks and keyboard presses.

## Description

## About

The Key Button component creates an interactive button that responds to both mouse clicks and keyboard presses. When clicked or when the specified key is pressed, it opens a link in a new tab and provides visual feedback with color changes during hover and press states.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  **Add Component**: Copy and paste the Key Button component into your Framer project file
    
2.  **Customize Appearance**: Set the Text label, configure Font properties, adjust colors for different states (button, hover, press), set Border Color and Border Radius for styling, and configure Vertical/Horizontal Padding for proper spacing
    
3.  **Configure Functionality**: Specify the Key to Press (e.g., "Enter", "Space", "k") and add the full URL in Link to Open field - the button will respond to both clicks and the specified key press by opening the link in a new tab
    
4.  As a hack you could have it as a background to your existing components and set the opacity to 0 and position to absolute to use your own button
    

**How it Works**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-n7kciava-aRQDiX6EtyDaXgDpCyUCdO7TJoMKox)

The component includes comprehensive property controls: Text for button label, Font with extended typography controls, Font Color, Button Color, Hover Color, Press Color, Border Color for visual styling, Key to Press (which key triggers the action), Link to Open (full URL), Border Radius for rounded corners, and Vertical/Horizontal Padding for spacing adjustments

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #11297

## Details

- **Author**: Nabeel
- **Price**: $9.00
- **Published**: 2025-08-11
- **Updated**: 2025-08-11
- **Added**: 2025-08-07
- **Categories**: Maps

## More like this

-   [Waypoint](/component/waypoint) — Dev Ahsan · $9 — Photo-first locations map
-   [No-key Store Locator](/component/no-key-store-locator) — Sean Weekes · $15 — UK store finder, no Google API key
-   [Geo Office Location](/component/geo-office-location) — Design Foundry · Free — Interactive Global Office Showcase
-   [Map Locator CMS](/component/map-locator-cms) — sherwin · $15 — Map Locator CMS is a flexible, interactive map component for Framer that helps you showcase stores, offices, properties, venues, service…