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
Add Component: Copy and paste the Key Button component into your Framer project file
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
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
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
For any queries and help setting up the component, contact hello@segmentui.com
Nabeel
