Press Key Action

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 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

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